10-10-2023, 02:16 AM
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.
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
