Author Topic: Re: Sprite Effects  (Read 563 times)

0 Members and 1 Guest are viewing this topic.

Offline TempodiBasic

  • Forum Resident
  • Posts: 1792
    • View Profile
Re: Sprite Effects
« on: September 25, 2019, 09:55:19 am »
Hi [banned user]

for a  fade effect with sprite loaded from file

there is a fine example in  WIki at page of _clearcolor  http://www.qb64.org/wiki/CLEARCOLOR
that uses _clearcolor and _setalpha.
here is adapted to load your image
Code: QB64: [Select]
  1. DIM SHARED spriteWidth AS INTEGER
  2. DIM SHARED spriteHeight AS INTEGER
  3. spriteWidth = 32: spriteHeight = 48
  4.  
  5. SCREEN _NEWIMAGE(spriteWidth, spriteHeight, 32)
  6.  
  7. spriteSheet = _LOADIMAGE("Char_m1.png")
  8.  
  9. DIM SHARED charSprite
  10. charSprite = _NEWIMAGE(spriteWidth, spriteHeight, 32)
  11.  
  12. _PUTIMAGE (0, 0), spriteSheet, charSprite, (0, 0)-(spriteWidth, spriteHeight)
  13. _CLEARCOLOR _RGB(255, 255, 255), charSprite
  14.  
  15. Effect1
  16.  
  17. SUB Effect1
  18.     DIM tempSprite AS LONG
  19.     tempSprite = _NEWIMAGE(spriteWidth, spriteHeight, 32)
  20.  
  21.     LINE (0, 0)-(spriteWidth, spriteHeight), _RGB(0, 0, 255), BF
  22.     _PUTIMAGE (0, 0), charSprite
  23.     SLEEP
  24.  
  25.     tw = spriteWidth \ 2
  26.     th = spriteHeight
  27.  
  28.     _DEST tempSprite
  29.     LINE (0, 0)-(spriteWidth, spriteHeight), _RGB(255, 255, 255), BF
  30.     _PUTIMAGE (0, 0), charSprite, tempSprite
  31.  
  32.     _SOURCE tempSprite
  33.  
  34.     FOR beamWidth = 0 TO tw - 1
  35.         FOR tc = 0 TO 255
  36.  
  37.             _DEST tempSprite
  38.             FOR beamHeight = 0 TO spriteHeight - 1
  39.                 IF POINT(tw - beamWidth, beamHeight) <> _RGB(255, 255, 255) THEN
  40.                     PSET (tw - beamWidth, beamHeight), _RGB(tc, tc, tc)
  41.                     PSET (tw + beamWidth, beamHeight), _RGB(tc, tc, tc)
  42.                 END IF
  43.             NEXT
  44.  
  45.             _CLEARCOLOR _RGB(255, 255, 255), tempSprite
  46.  
  47.             _DEST 0
  48.             LINE (0, 0)-(spriteWidth, spriteHeight), _RGB(0, 0, 255), BF
  49.             _PUTIMAGE (0, 0), tempSprite, 0
  50.             _DISPLAY
  51.         NEXT
  52.  
  53.         _DELAY 0.05
  54.     NEXT
  55.  
  56.     _FREEIMAGE (tempSprite)
  57.  
  58.  
and another example is in the TASK of my first teacher of QB64 (Terry Ritchie)  here in the section of _Setalpha
http://www.qb64sourcecode.com/Task16.html

What I haven't understood is why do you set a window of the dimension of the sprite in  your code...
please can you say me in other words your goal?
Programming isn't difficult, only it's  consuming time and coffee

Offline SMcNeill

  • QB64 Developer
  • Forum Resident
  • Posts: 3972
    • View Profile
    • Steve’s QB64 Archive Forum
Re: Sprite Effects
« Reply #1 on: September 25, 2019, 10:44:09 am »
Here's an example of how I'd do a basic "Fade Out" routine with a sprite:

Code: QB64: [Select]
  1. 'The idea is to make the sprite disapear off the screen without disturbing the background.
  2. DIM SHARED SpriteSheet, BackGround, DisplayScreen
  3. DIM SHARED SpriteWidth AS INTEGER, SpriteHeight AS INTEGER
  4.  
  5. BackGround = _NEWIMAGE(640, 480, 32)
  6. DisplayScreen = _NEWIMAGE(640, 480, 32)
  7. SpriteSheet = _LOADIMAGE("Char_m1.png", 32)
  8. RemoveWhiteBackground '_CLEARCOLOR _RGB(255, 255, 255), SpriteSheet 'I tend to just use _MEM for this, as I seldom seem to get clearcolor to work as I'd expect for me.
  9.  
  10. SCREEN DisplayScreen
  11. SpriteWidth = 32: SpriteHeight = 48
  12.  
  13. 'Draw a background
  14. _DEST BackGround
  15. CLS , _RGB32(0, 0, 0) 'clear the background solid black instead of transparent
  16. LINE (100, 100)-(300, 300), _RGB32(255, 255, 0), BF ' a yellow box
  17. CIRCLE (250, 250), 150, _RGB32(255, 0, 0) ' A red circle
  18. PAINT (250, 250), _RGB32(255, 0, 0) 'fill the circle
  19. _DEST DisplayScreen
  20. x = 250
  21. y = 250
  22. visible = -1 'show the "hero" to start with
  23.  
  24.     _LIMIT 30
  25.     _PUTIMAGE , BackGround, DisplayScreen 'place the background
  26.     IF visible THEN _PUTIMAGE (x, y)-STEP(SpriteWidth, SpriteHeight), SpriteSheet, DisplayScreen, (0, 0)-(SpriteWidth, SpriteHeight)
  27.  
  28.     k = _KEYHIT
  29.     SELECT CASE k
  30.         CASE 32 'space
  31.             visible = NOT visible
  32.             IF NOT visible THEN FadeOut x, y 'do the fade routine on our hero, until they're gone.
  33.         CASE 27 'escape
  34.             SYSTEM
  35.         CASE 18432 'up
  36.             y = y - 1
  37.         CASE 19200 'left
  38.             x = x - 1
  39.         CASE 20480 'down
  40.             y = y + 1
  41.         CASE 19712
  42.             x = x + 1
  43.     END SELECT
  44.     _DISPLAY
  45.  
  46.  
  47. SUB FadeOut (x, y) 'positon of the sprite to fade out
  48.     TempSheet = _NEWIMAGE(SpriteWidth, SpriteHeight, 32)
  49.     m = _MEMIMAGE(TempSheet)
  50.     FOR i = 265 TO 0 STEP -26.5
  51.         _PUTIMAGE (0, 0)-(SpriteWidth, SpriteHeight), BackGround, TempSheet, (x, y)-STEP(SpriteWidth, SpriteHeight)
  52.         o = 0
  53.         DO
  54.             _MEMGET m, m.OFFSET + o + 3, a
  55.             IF a - i < 0 THEN a = 0 ELSE a = a - i
  56.             _MEMPUT m, m.OFFSET + o + 3, a
  57.             o = o + 4
  58.         LOOP UNTIL o >= m.SIZE
  59.         _PUTIMAGE (x, y)-STEP(32, 48), TempSheet, DisplayScreen
  60.         _DISPLAY
  61.         _LIMIT 5 '2 second fade
  62.     NEXT
  63.     _FREEIMAGE TempSheet
  64.  
  65. SUB RemoveWhiteBackground
  66.     m = _MEMIMAGE(SpriteSheet)
  67.     _MEMGET m, m.OFFSET, p
  68.     DO
  69.         IF _MEMGET(m, m.OFFSET + o, _UNSIGNED LONG) = p THEN
  70.             _MEMPUT m, m.OFFSET + o, 0 AS LONG
  71.         END IF
  72.         o = o + 4
  73.     LOOP UNTIL o >= m.SIZE
  74.  

In this case, we have the background image, the sprite, and then the display where we place them in order (draw the background and then the sprite.)  To do a "Fade Out", we don't actually fade out the sprite -- it was already visible on the screen from the last draw...  What we do is simply "Fade In" that segment of the background, a small alpha increase at a time.  (In this demo, the fade effect is timed to take 2 seconds, using the internal _LIMIT command inside the FadeOut sub.)

Use arrow keys to move the hero (only 1 sprite used, so no real animation done here.), and once you find a good spot from them, hit space to fade him out.  Space once more will pop him back on screen so you can move and watch it elsewhere on the screen.   Hit ESC when finished. 
« Last Edit: September 25, 2019, 10:51:45 am by SMcNeill »
https://github.com/SteveMcNeill/Steve64 — A github collection of all things Steve!

Offline Petr

  • Forum Resident
  • Posts: 1720
  • The best code is the DNA of the hops.
    • View Profile
Re: Sprite Effects
« Reply #2 on: September 25, 2019, 11:46:02 am »


Code: QB64: [Select]
  1. 'very easy example (for multicolor background)
  2.  
  3. 'step 1: creating backgorund:
  4.  
  5. SCREEN _NEWIMAGE(800, 600, 32)
  6. Sprite& = _LOADIMAGE("char_m1.png", 32)
  7. _CLEARCOLOR &HFFFFFFFF, Sprite&
  8.  
  9.  
  10. FOR f = 0 TO 766 STEP 33
  11.     r = RND * 255
  12.     g = RND * 127
  13.     b = RND * 200
  14.     LINE (f, 0)-(f + 33, 599), _RGB32(r, g, b), BF
  15.  
  16. 'step 2: let say, your sprite is on position 400, 300 to 432, 348. Before you draw sprite in this position, save this area background. Your Sprite is 32 x 48, so:
  17.  
  18. bck& = _NEWIMAGE(32, 48, 32)
  19. _PUTIMAGE , 0, bck&, (400, 300)-(431, 347)
  20.  
  21. 'step 3: place sprite image 1 to this area
  22.  
  23. _PUTIMAGE (400, 300), Sprite&, 0, (0, 0)-(32, 48)
  24.  
  25. 'step 4: place back previous saved background area, in 255 steps
  26.  
  27.  
  28. FOR s = 0 TO 255
  29.     _SETALPHA s, &H00000000 TO &HFFFFFFFF, bck&
  30.     _PUTIMAGE (400, 300), 0, Sprite&, (0, 0)-(32, 48)
  31.     _PUTIMAGE (400, 300), bck&
  32.     _DELAY .01
  33. [code]

Offline Cobalt

  • QB64 Developer
  • Forum Resident
  • Posts: 878
  • At 60 I become highly radioactive!
    • View Profile
Re: Sprite Effects
« Reply #3 on: September 25, 2019, 01:03:48 pm »
Here is a rather good fade out for your character, Extremely simple and easy. fades out on Full Color background image (attachment below)

Code: QB64: [Select]
  1. 'dissolving on full color background!
  2. CONST True = -1
  3. '-----------------All the setup------------------------
  4. DIM SHARED Layer(5) AS LONG
  5. SCREEN _NEWIMAGE(640, 480, 32)
  6. Layer(0) = _DISPLAY
  7. Layer(1) = _NEWIMAGE(640, 480, 32) 'mix layer
  8. Layer(2) = _LOADIMAGE("backgroundimage.jpg", 32) 'our colorful image
  9. Layer(3) = _LOADIMAGE("Char_m1.png", 32)
  10. Layer(4) = _NEWIMAGE(32, 48, 32) 'dissolving character MAGIC layer!
  11. _CLEARCOLOR _RGB32(255, 255, 255), Layer(3)
  12. _CLEARCOLOR _RGB32(0, 0, 0), Layer(4)
  13. '-----------------Setup Done---------------------------
  14.  
  15. _PUTIMAGE , Layer(3), Layer(4), (0, 0)-STEP(31, 47) 'place the current character sprite on to the MAGIC fade layer.
  16.  
  17. _DELAY .25 'let the window be created fully
  18.  
  19. CA% = 255 'Current Alpha adjustment
  20. FadeSpeed%% = 4 'change this to adjust the speed that the
  21. '                character fades out, 1-Very slow, 16-fast, 32-Blink and you miss it.
  22.  Kbd$ = INKEY$
  23.  IF Kbd$ = CHR$(27) THEN ExitFlag%% = True
  24.  IF Kbd$ = CHR$(32) THEN FadeHimOut = True
  25.  
  26.  _PUTIMAGE , Layer(2), Layer(1), (0, 0)-STEP(639, 479) 'Place our background image on the mix layer
  27.  _SETALPHA CA%, , Layer(4) ' "FADE" our character sprite out
  28.  _CLEARCOLOR _RGB32(0, 0, 0), Layer(4) 'Make sure not to introduce the "Black Box of Damnation!"
  29.  _PUTIMAGE (250, 300), Layer(4), Layer(1) 'place our character sprite on the mix layer
  30.  _PUTIMAGE , Layer(1), Layer(0) 'move the mix layer to the screen
  31.  
  32.  IF FadeHimOut THEN CA% = CA% - FadeSpeed%% ELSE _PRINTSTRING (10, 465), "Press Space to Fade me out!", Layer(0)
  33.  _DELAY .045 'this value seems good.
  34.  
  35.  IF CA% <= 0 THEN ExitFlag%% = True 'finish when  faded.
  36. LOOP UNTIL ExitFlag%%
  37.  
  38.  

now a lot of this is my personal coding method and can be changed, LAYER(), _Delay, ExitFlag%% ect.  without much trouble. It just makes it easier for me to keep track of what I'm doing. I have one more idea for a 'transporter' effect that will take more time to hash out. but here you can see the character fade from a full color background. and the code to do this is actually very small.

Hopefully this post works, I added a couple of comments to the code and without thinking hit F5, not sure what that does in Firefox but it did something.
BackGroundImage.jpg
* BackGroundImage.jpg (Filesize: 195.33 KB, Dimensions: 853x480, Views: 39)
Granted after becoming radioactive I only have a half-life!

Offline Cobalt

  • QB64 Developer
  • Forum Resident
  • Posts: 878
  • At 60 I become highly radioactive!
    • View Profile
Re: Sprite Effects
« Reply #4 on: September 26, 2019, 12:02:21 pm »
getting closer to a kind of teleporting FX, has an issue with background noise that I still don't know where its coming from. and it doesn't want to fade in quite as nice as I would like. So using lower values for the RND in the _SETALPHA doesn't seem to work quite right. once you get below 128 it starts taking an absurd amount of time to fully materialize. I may have to look into a more brute force way.

Code: QB64: [Select]
  1. 'dissolving on full color background!
  2. CONST True = -1
  3. '-----------------All the setup------------------------
  4. DIM SHARED Layer(5) AS LONG
  5. SCREEN _NEWIMAGE(640, 480, 32)
  6. Layer(0) = _DISPLAY
  7. Layer(1) = _NEWIMAGE(640, 480, 32) 'mix layer
  8. Layer(2) = _LOADIMAGE("backgroundimage.jpg", 32) 'our colorful image
  9. Layer(3) = _LOADIMAGE("Char_m1.png", 32)
  10. Layer(4) = _NEWIMAGE(32, 48, 32) 'dissolving character MAGIC layer!
  11. Layer(5) = _NEWIMAGE(31, 1, 32) 'Teleporter
  12. _CLEARCOLOR _RGB32(255, 255, 255), Layer(3)
  13. _CLEARCOLOR _RGB32(0, 0, 0), Layer(4)
  14. _SETALPHA 1, , Layer(5)
  15. '-----------------Setup Done---------------------------
  16.  
  17. '_PUTIMAGE , Layer(3), Layer(4), (0, 0)-STEP(31, 47) 'place the current character sprite on to the MAGIC fade layer.
  18.  
  19. _DELAY .25 'let the window be created fully
  20.  
  21.  kbd$ = INKEY$
  22.  IF kbd$ = CHR$(27) THEN ExitFlag%% = True
  23.  IF kbd$ = CHR$(32) THEN Teleporter%% = True
  24.  _PUTIMAGE , Layer(2), Layer(1), (0, 0)-STEP(639, 479) 'place our background
  25.  IF Teleporter%% THEN Add_Teleporter_FX: _PRINTSTRING (1, 1), "Energize!", Layer(1) ELSE _PRINTSTRING (1, 1), "Transporter Ready Captain, Just press space!", Layer(1)
  26.  _PUTIMAGE (250, 300), Layer(4), Layer(1) 'place our character
  27.  _PUTIMAGE , Layer(1), Layer(0) 'place our composistion to the screen
  28.  _DELAY .025
  29. LOOP UNTIL ExitFlag%%
  30.  
  31. SUB Add_Teleporter_FX
  32.  Y%% = INT(RND * 48) 'pick a random slice to move
  33.  _PUTIMAGE , Layer(3), Layer(5), (0, Y%%)-STEP(31, 0) 'place it in its own layer to adjust its alpha
  34.  _SETALPHA INT(RND * 255), , Layer(5) 'randomly change its alpha
  35.  _CLEARCOLOR _RGB32(0, 0, 0), Layer(5) 'make sure to remove black
  36.  _PUTIMAGE (0, Y%%), Layer(5), Layer(4) 'put this slice to the character layer
  37.  
Granted after becoming radioactive I only have a half-life!