Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
QB64 Logo Maker
#1
Something I've been tinkering with. I created the QB64PE fire logo on the tutorial site and decided to keep going with the code to create animated logos.

I've created a demo animation in the "main code" section to show how the graphics can be used. The zip file includes the sprite sheets and phoenix sound.

I envision the demo I made as a "Made With QB64 Phoenix Edition" intro to game programs.

At the top of the code is a complete chart of all assets brought in and their locations on the sprite sheet as well as where they should be placed on the screen to create a logo (of course you can choose to put them any where you like). Play around and see what you can come up with.

The ZIP file below contains the sprite sheets, sound file, and the .BAS file.

Code: (Select All)
' QB64PE Fire Logo
'
' All the assets are here needed to create custom QB64PE logos
' The subroutine "GetAssets" gathers everything from the image and sound files
' The included animation is just a sample (main code).
'
'         SPRITE SHEET               SIZE
' -----------------------------    ---------
' LogoLargeSheetTransparent.PNG  - 3000x4800 (10 columns, 16 rows)
' LogoSmallSheetTransparent.PNG  -  215x 460
' LogoPhoenixMaskTransparent.PNG -  300x 300 (not really a sprite sheet as it contains only one image)
'
' Note: The screen or image used to create QB64PE logos is assumed to be 300x300 pixels.
'       The numbers below are based on that 300x300 screen/image size.
'
'                       ON SCREEN
'      SPRITE          COORDINATES     ON SHEET LOCATION      SIZE           ON SPRITE SHEET
' ------------------   -----------     -----------------     -------   -----------------------------
' PhoenixFire(x)     - (  0,   0)   110 phoenix fire images  300x300   LogoLargeSheetTransparent.PNG (0,   0)-(2999,3299) @ 300x300
' Fire(c)            - (  0,   0)   50 bottom fire images    300x300   LogoLargeSheetTransparent.PNG (0,3300)-(2999,4799) @ 300x300
' Sprite.RedPhoenix  - ( 59,   8)   (  0,   0)-(182, 289)    183x290   LogoSmallSheetTransparent.PNG
' Sprite.QB64        - (110,  19)   (  0, 290)-( 78, 375)     79x 86   LogoSmallSheetTransparent.PNG
' Sprite.PE          - (108, 162)   ( 79, 240)-(162, 329)     84x 40   LogoSmallSheetTransparent.PNG
' Sprite.LetterQ     - (110,  19)   (  0, 290)-( 36, 333)     37x 44   LogoSmallSheetTransparent.PNG
' Sprite.LetterB     - (154,  19)   ( 44, 290)-( 77, 330)     34x 41   LogoSmallSheetTransparent.PNG
' Sprite.Number6     - (111,  65)   (  1, 336)-( 34, 375)     34x 40   LogoSmallSheetTransparent.PNG
' Sprite.Number4     - (152,  65)   ( 42, 336)-( 78, 375)     37x 40   LogoSmallSheetTransparent.PNG
' Sprite.LetterP     - (108, 162)   ( 79, 290)-(117, 329)     40x 40   LogoSmallSheetTransparent.PNG
' Sprite.LetterE     - (154, 162)   (125, 290)-(162, 329)     38x 40   LogoSmallSheetTransparent.PNG
' Sprite.WordPhoenix - (108, 162)   (  0, 376)-(214, 417)    215x 42   LogoSmallSheetTransparent.PNG
' Sprite.WordEdition - (154, 162)   (  0, 418)-(185, 459)    186x 42   LogoSmallSheetTransparent.PNG
' Sprite.PhoenixMask - (  0,   0)   (  0,   0)-(299, 299)    300x300   LogoPhoenixMaskTransparent.PNG

' COLORS USED
' -----------
' Color of Q = _RGB32( 77, 161, 179) Dark Cyan
' Color of B = _RGB32( 26,  50, 230) Off Blue
' Color of 6 = _RGB32(242, 175,  13) Light Orange
' Color of 4 = _RGB32(242,  94,  13) Burnt Orange
' Color of P = _RGB32(255, 255,   0) Yellow
' Color of E = _RGB32(255, 255,   0) Yellow

' All RED in images                  = _RGB32(255,   0,   0) (red phoenix, red in "hoenix" and "dition")
' BLACK around "dition" and "hoenix" = _RGB32(  0,   0,   1) Almost Black (if letter border fading/hiding is desired)
' All other BLACK in images          = _RGB32(  0,   0,   0) (letter outlines, phoenix mask)
' All TRANSPARENT in images          = _RGB32(255,   0, 255) Magenta

OPTION _EXPLICIT '                     declare those variables!
CONST BACKGROUND~& = _RGB32(0, 0, 0) ' background color

' Note: Background color not working correctly when flame outline is faded out. Need to correct this.
'       Use black for now.

TYPE IMAGE '                   IMAGE & LOCATION PROPERTIES
    Image AS LONG '            sprite image
    x AS SINGLE '              default screen X location
    y AS SINGLE '              default screen Y location
END TYPE

TYPE SPRITE '                  SPRITE IMAGE PROPERTIES
    RedPhoenix AS IMAGE '      red phoenix silhoutte surrounded by black outline
    QB64 AS IMAGE '            multicolored QB64 as one image each letter surrounded by black outline
    PE AS IMAGE '              yellow PE as one image each letter surrounded by black outline
    LetterQ AS IMAGE '         just the cyan letter Q surrounded by black outline
    LetterB AS IMAGE '         just the blue letter B surrounded by black outline
    Number6 AS IMAGE '         just the light orange number 6 surrounded by black outline
    Number4 AS IMAGE '         just the dark orange number 4 surrounded by black outline
    LetterP AS IMAGE '         just the yellow letter P surrounded by black outline
    LetterE AS IMAGE '         just the yellow letter E surrounded by black outline
    WordPhoenix AS IMAGE '     the entire word "Phoenix", yellow P, red "hoenix" surrounded by black outline
    WordEdition AS IMAGE '     the entire word "Edition", yellow W, red "dition" surrounded by black outline
    PhoenixMask AS IMAGE '     the black phoenix mask
END TYPE

DIM Sprite AS SPRITE '         sprite images
DIM Fire(49) AS LONG '         fire frames
DIM PhoenixFire(109) AS LONG ' red phoenix outline flame frames
DIM ClearScreen AS LONG '      CLS replacement
DIM FireBox AS LONG '          bottom fire animation box
DIM WordPhoenix AS LONG '      the entire word "Phoenix" image
DIM WordEdition AS LONG '      the entire word "Edition" image
DIM Screech AS LONG '          the sound a Phoenix makes (I think)
DIM px AS SINGLE '             letter P location before move
DIM py AS SINGLE
DIM ex AS SINGLE '             letter E location before move
DIM ey AS SINGLE
DIM pxvec AS SINGLE '          letter P vector to final location
DIM pyvec AS SINGLE
DIM exvec AS SINGLE '          letter E vector to final location
DIM eyvec AS SINGLE
DIM Alpha AS INTEGER '         alpha counter
DIM Skip AS INTEGER '          frame skip counter
DIM Frame AS INTEGER '         outline flame frame counter
DIM Size AS INTEGER '          size counter

'+-----------+
'| Main code |
'+-----------+

GetAssets '                         set up images and sound
SCREEN _NEWIMAGE(300, 300, 32) '    set up screen

'+------------------------------+
'| Zoom flaming outline forward |
'+------------------------------+

Size = 0
Frame = 0
Skip = 0
DO
    _LIMIT 120 '                                                                            120 frames per second
    Skip = Skip + 1 '                                                                       keep flames at 30 FPS
    IF Skip = 4 THEN '                                                                      time for next flame frame?
        Skip = 0 '                                                                          yes, reset 30FPS counter
        Frame = Frame + 1 '                                                                 increment animation counter
        IF Frame = 110 THEN Frame = 0 '                                                     reset animation counter when needed
    END IF
    _PUTIMAGE (0, 0), ClearScreen '                                                         clear screen
    _PUTIMAGE (149 - Size, 149 - Size)-(149 + Size, 149 + Size), PhoenixFire(Frame) '       display flaming outline
    _PUTIMAGE (149 - Size, 149 - Size)-(149 + Size, 149 + Size), Sprite.PhoenixMask.Image ' display phoenix mask
    _DISPLAY '                                                                              update screen
    Size = Size + 1 '                                                                       increase size of images
LOOP UNTIL Size = 150 '                                                                     leave when image full size

'+---------------------+
'| Fade in red phoenix |
'+---------------------+

px = 42 '   word "Phoenix" location
py = 202
ex = 57 '   word "Edition" location
ey = 247
Alpha = 0
_SNDPLAY Screech
DO
    _LIMIT 30
    Frame = Frame + 1
    IF Frame = 110 THEN Frame = 0
    _SETALPHA Alpha, _RGBA32(255, 0, 0, 0) TO _RGBA(255, 0, 0, 255), Sprite.RedPhoenix.Image ' fade phoenix red
    Alpha = Alpha + 4 '                                                                        increase fade
    _PUTIMAGE (0, 0), ClearScreen '                                                 clear screen
    _PUTIMAGE (0, 0), PhoenixFire(Frame) '                                          display flaming outline
    _PUTIMAGE (Sprite.RedPhoenix.x, Sprite.RedPhoenix.y), Sprite.RedPhoenix.Image ' display red phoenix
    _PUTIMAGE (Sprite.QB64.x, Sprite.QB64.y), Sprite.QB64.Image '                   display QB64
    UpdateWords '                                                                   update flames in letters of words
    _PUTIMAGE (px, py), WordPhoenix '                                               display "Phoenix"
    _PUTIMAGE (ex, ey), WordEdition '                                               display "Edition"
    _DISPLAY '                                                                      update screen
LOOP UNTIL Alpha = 256

pxvec = (108 - px) / 30 ' calculate vectors of letter P to new location
pyvec = (162 - py) / 30 ' (30 steps)
exvec = (154 - ex) / 30 ' calculate vectors of letter E to new location
eyvec = (162 - ey) / 30 ' (30 steps)

'+----------------------------+
'| Move PE to banner location |
'+----------------------------+

Alpha = 255
DO
    _LIMIT 30
    Frame = Frame + 1
    IF Frame = 110 THEN Frame = 0
    _PUTIMAGE (0, 0), ClearScreen '                                                         clear screen
    _SETALPHA Alpha, _RGB32(0, 0, 0, 0) TO _RGB32(255, 255, 255, 255), PhoenixFire(Frame) ' fade out flaming outline
    _PUTIMAGE (0, 0), PhoenixFire(Frame) '                                                  display flaming outline
    _PUTIMAGE (Sprite.RedPhoenix.x, Sprite.RedPhoenix.y), Sprite.RedPhoenix.Image '         display red phoenix
    _PUTIMAGE (Sprite.QB64.x, Sprite.QB64.y), Sprite.QB64.Image '                           display QB64
    _PUTIMAGE (px, py), Sprite.LetterP.Image '                                              display letter P
    px = px + pxvec '                                                                       update letter P position
    py = py + pyvec
    _PUTIMAGE (ex, ey), Sprite.LetterE.Image '                                              display letter E
    ex = ex + exvec '                                                                       update letter E position
    ey = ey + eyvec
    Alpha = Alpha - 5 '                                                                     increase fade
    _DISPLAY '                                                                              update screen
LOOP UNTIL INT(px) > 107 '                                                                  leave when letter P in place

'+--------------------+
'| Display final logo |
'+--------------------+

_PUTIMAGE (0, 0), ClearScreen
_PUTIMAGE (Sprite.RedPhoenix.x, Sprite.RedPhoenix.y), Sprite.RedPhoenix.Image
_PUTIMAGE (Sprite.QB64.x, Sprite.QB64.y), Sprite.QB64.Image
_PUTIMAGE (Sprite.PE.x, Sprite.PE.y), Sprite.PE.Image
_DISPLAY
SLEEP 1
FOR Frame = 0 TO 109 '                           free assets from RAM
    _FREEIMAGE PhoenixFire(Frame)
    IF Frame < 50 THEN _FREEIMAGE Fire(Frame)
NEXT Frame
_FREEIMAGE FireBox
_FREEIMAGE ClearScreen
_FREEIMAGE WordPhoenix
_FREEIMAGE WordEdition
_FREEIMAGE Sprite.RedPhoenix.Image
_FREEIMAGE Sprite.QB64.Image
_FREEIMAGE Sprite.PE.Image
_FREEIMAGE Sprite.LetterQ.Image
_FREEIMAGE Sprite.LetterB.Image
_FREEIMAGE Sprite.Number6.Image
_FREEIMAGE Sprite.Number4.Image
_FREEIMAGE Sprite.LetterP.Image
_FREEIMAGE Sprite.LetterE.Image
_FREEIMAGE Sprite.WordPhoenix.Image
_FREEIMAGE Sprite.WordEdition.Image
_FREEIMAGE Sprite.PhoenixMask.Image
_SNDCLOSE Screech
SYSTEM '                                         return to OS

' ______________________________________________________________________________________________________
'/                                                                                                      \
SUB UpdateWords () '                                                                        UpdateWords |
    ' __________________________________________________________________________________________________|____
    '/                                                                                                       \
    '| Updates the fire animation inside "hoenix" and "dition".                                              |
    '\_______________________________________________________________________________________________________/

    SHARED Sprite AS SPRITE
    SHARED WordPhoenix AS LONG
    SHARED WordEdition AS LONG
    SHARED FireBox AS LONG

    UpdateFireBox -1 '                                              next flame animation
    _CLEARCOLOR _RGB32(255, 0, 0), Sprite.WordPhoenix.Image '       make red transparent
    _PUTIMAGE (0, 0), FireBox, WordPhoenix, (0, 258)-(214, 299) '   put fire on image
    _PUTIMAGE (0, 0), Sprite.WordPhoenix.Image, WordPhoenix '       overlay word onto image
    _CLEARCOLOR _RGB32(255, 255, 255), WordPhoenix '                make white transparent
    _CLEARCOLOR _RGB32(255, 0, 0), Sprite.WordEdition.Image '       make red transparent
    _PUTIMAGE (0, 0), FireBox, WordEdition, (114, 258)-(299, 299) ' put fire on image
    _PUTIMAGE (0, 0), Sprite.WordEdition.Image, WordEdition '       overlay word onto image
    _CLEARCOLOR _RGB32(255, 255, 255), WordEdition '                make white transparent

END SUB

' ______________________________________________________________________________________________________
'/                                                                                                      \
SUB UpdateFireBox (Action AS INTEGER) '                                                   UpdateFireBox |
    ' __________________________________________________________________________________________________|____
    '/                                                                                                       \
    '| Updates the firebox image with the next fire animation frame                                          |
    '|                                                                                                       |
    '| Action: 0 same frame, non 0 next frame                                                                |
    '\_______________________________________________________________________________________________________/

    SHARED FireBox AS LONG
    SHARED Fire() AS LONG
    SHARED ClearScreen AS LONG
    STATIC c AS INTEGER

    IF Action THEN '                         move to next frame?
        c = c + 1 '                          yes, increment frame counter
        IF c = 50 THEN c = 0 '               reset counter when needed
    END IF
    _PUTIMAGE (0, 0), ClearScreen, FireBox ' clear firebox image
    _PUTIMAGE (0, 0), Fire(c), FireBox '     display next frame in animation

END SUB

' ______________________________________________________________________________________________________
'/                                                                                                      \
SUB GetAssets () '                                                                            GetAssets |
    ' __________________________________________________________________________________________________|____
    '/                                                                                                       \
    '| Get images and sounds from asset files                                                                |
    '\_______________________________________________________________________________________________________/

    SHARED Fire() AS LONG '        fire frames
    SHARED PhoenixFire() AS LONG ' red phoenix outline flame frames
    SHARED Sprite AS SPRITE '      need access to sprite images
    SHARED ClearScreen AS LONG '   blank screen (alternate CLS)
    SHARED FireBox AS LONG '       image to hold bottom flame animation
    SHARED WordPhoenix AS LONG '   "Phoenix" word image holder
    SHARED WordEdition AS LONG '   "Edition" word image holder
    SHARED Screech AS LONG '       phoenix mating call?
    DIM SmallSheet AS LONG '       small sprite sheet
    DIM LargeSheet AS LONG '       large sprite sheet
    DIM x AS INTEGER '             row counter
    DIM y AS INTEGER '             column counter
    DIM c AS INTEGER '             image counter

    ClearScreen = _NEWIMAGE(300, 300, 32) '  create CLS alternative
    _DEST ClearScreen
    CLS , BACKGROUND
    _DEST 0
    FireBox = _NEWIMAGE(300, 300, 32) '      create image holders
    WordPhoenix = _NEWIMAGE(215, 42, 32)
    WordEdition = _NEWIMAGE(186, 42, 32)
    Screech = _SNDOPEN("LogoPhoenix.ogg") '  load phoenix mating call

    '+------------------+
    '| Load image files |
    '+------------------+

    Sprite.PhoenixMask.Image = _LOADIMAGE("LogoPhoenixMaskTransparent.png", 32) ' load phoenix black mask
    SmallSheet = _LOADIMAGE("LogoSmallSheetTransparent.png", 32) '                load small sprite sheet
    LargeSheet = _LOADIMAGE("LogoLargeSheetTransparent.png", 32) '                load large sprite sheet

    '+---------------------------------------------------------------------------------------------------+
    '| Set location of images on screen, create image containers, extract images from small sprite sheet.|
    '+---------------------------------------------------------------------------------------------------+

    '+---------------------------------------------------+
    '| Red phoenix silhoutte surrounded by black outline |
    '+---------------------------------------------------+
    Sprite.RedPhoenix.x = 59: Sprite.RedPhoenix.y = 8
    Sprite.RedPhoenix.Image = _NEWIMAGE(183, 290, 32)
    _PUTIMAGE , SmallSheet, Sprite.RedPhoenix.Image, (0, 0)-(182, 289)

    '+------------------------------------------------------------------------+
    '| Multicolored QB64 as one image each letter surrounded by black outline |
    '+------------------------------------------------------------------------+
    Sprite.QB64.x = 110: Sprite.QB64.y = 19
    Sprite.QB64.Image = _NEWIMAGE(79, 86, 32)
    _PUTIMAGE , SmallSheet, Sprite.QB64.Image, (0, 290)-(78, 375)

    '+----------------------------------------------------------------+
    '| Yellow PE as one image each letter surrounded by black outline |
    '+----------------------------------------------------------------+
    Sprite.PE.x = 108: Sprite.PE.y = 162
    Sprite.PE.Image = _NEWIMAGE(84, 40, 32)
    _PUTIMAGE , SmallSheet, Sprite.PE.Image, (79, 290)-(162, 329)

    '+----------------------------------------------------+
    '| Just the cyan letter Q surrounded by black outline |
    '+----------------------------------------------------+
    Sprite.LetterQ.x = 110: Sprite.LetterQ.y = 19
    Sprite.LetterQ.Image = _NEWIMAGE(37, 44, 32)
    _PUTIMAGE , SmallSheet, Sprite.LetterQ.Image, (0, 290)-(36, 333)

    '+----------------------------------------------------+
    '| Just the blue letter B surrounded by black outline |
    '+----------------------------------------------------+
    Sprite.LetterB.x = 154: Sprite.LetterB.y = 19
    Sprite.LetterB.Image = _NEWIMAGE(34, 41, 32)
    _PUTIMAGE , SmallSheet, Sprite.LetterB.Image, (44, 290)-(77, 330)

    '+------------------------------------------------------------+
    '| Just the light orange number 6 surrounded by black outline |
    '+------------------------------------------------------------+
    Sprite.Number6.x = 111: Sprite.Number6.y = 65
    Sprite.Number6.Image = _NEWIMAGE(34, 40, 32)
    _PUTIMAGE , SmallSheet, Sprite.Number6.Image, (1, 336)-(34, 375)

    '+-----------------------------------------------------------+
    '| Just the dark orange number 4 surrounded by black outline |
    '+-----------------------------------------------------------+
    Sprite.Number4.x = 152: Sprite.Number4.y = 65
    Sprite.Number4.Image = _NEWIMAGE(37, 40, 32)
    _PUTIMAGE , SmallSheet, Sprite.Number4.Image, (42, 336)-(78, 375)

    '+------------------------------------------------------+
    '| Just the yellow letter P surrounded by black outline |
    '+------------------------------------------------------+
    Sprite.LetterP.x = 108: Sprite.LetterP.y = 162
    Sprite.LetterP.Image = _NEWIMAGE(40, 40, 32)
    _PUTIMAGE , SmallSheet, Sprite.LetterP.Image, (79, 290)-(117, 329)

    '+------------------------------------------------------+
    '| Just the yellow letter E surrounded by black outline |
    '+------------------------------------------------------+
    Sprite.LetterE.x = 154: Sprite.LetterE.y = 162
    Sprite.LetterE.Image = _NEWIMAGE(38, 40, 32)
    _PUTIMAGE , SmallSheet, Sprite.LetterE.Image, (125, 290)-(162, 329)

    '+-------------------------------------------------------------------------------+
    '| The entire word "Phoenix", yellow P, red "hoenix" surrounded by black outline |
    '+-------------------------------------------------------------------------------+
    Sprite.WordPhoenix.x = 108: Sprite.WordPhoenix.y = 162
    Sprite.WordPhoenix.Image = _NEWIMAGE(215, 42, 32)
    _PUTIMAGE , SmallSheet, Sprite.WordPhoenix.Image, (0, 376)-(214, 417)

    '+-------------------------------------------------------------------------------+
    '| The entire word "Edition", yellow E, red "dition" surrounded by black outline |
    '+-------------------------------------------------------------------------------+
    Sprite.WordEdition.x = 154: Sprite.WordEdition.y = 162
    Sprite.WordEdition.Image = _NEWIMAGE(186, 42, 32)
    _PUTIMAGE , SmallSheet, Sprite.WordEdition.Image, (0, 418)-(185, 459)
    _FREEIMAGE SmallSheet '                                  small sprite sheet no longer needed

    '+----------------------------------------+
    '| extract images from large sprite sheet |
    '+----------------------------------------+

    y = 0
    c = -1
    DO
        x = 0
        DO
            '+--------------------------------------+
            '| Extract phoenix flame outline images |
            '+--------------------------------------+

            c = c + 1
            PhoenixFire(c) = _NEWIMAGE(300, 300, 32)
            _PUTIMAGE , LargeSheet, PhoenixFire(c), (x * 300, y * 300)-(x * 300 + 299, y * 300 + 299)

            '+-----------------------------+
            '| Extract bottom flame images |
            '+-----------------------------+

            IF c < 50 THEN
                Fire(c) = _NEWIMAGE(300, 300, 32)
                _PUTIMAGE , LargeSheet, Fire(c), (x * 300, 3300 + y * 300)-(x * 300 + 299, y * 300 + 3599)
            END IF
            x = x + 1
        LOOP UNTIL x = 10
        y = y + 1
    LOOP UNTIL y = 11
    _FREEIMAGE LargeSheet '                                  large sprite sheet no longer needed

END SUB


Attached Files
.zip   QB64Logo.zip (Size: 8.53 MB / Downloads: 41)
New to QB64pe? Visit the QB64 tutorial to get started.
QB64 Tutorial
Reply
#2
Thumbs Up 
That is sharp! Nice one Terry!
b = b + ...
Reply
#3
(10-10-2023, 02:29 AM)bplus Wrote: That is sharp! Nice one Terry!

Thanks Smile
New to QB64pe? Visit the QB64 tutorial to get started.
QB64 Tutorial
Reply




Users browsing this thread: 1 Guest(s)