How to overlay 2 sprites?

Advanced game related topics
emm
New User
New User
Posts: 7
Joined: Tue Oct 18, 2022 7:47 pm

How to overlay 2 sprites?

Post by emm »

Hi,

I've 2 sprites which I want to overlay.
I understand that the screen can't be considered to have a Color 0 which I could alter independently of other colors unlike on bitmat platforms.
So I put on sprite 0 the background = color 0
Then I put a png with a transparent background and parts in sprite 1 on top of it.

But the mix don't work yet.

Could you explain how to do what I try to please?

See link at top of source: the text in black on this video would be equal to the png.

Here is the code:

Code: Select all

; ------------------------------------------------------------
; Goal: display in the background of the transparent png rasters alike those of  Decrunchers
;-> https://youtu.be/sq4uurfvdBY?t=59

UsePNGImageDecoder()
UsePNGImageEncoder()

RygImagePath$="/home/manu/Desktop/1.png"

If InitSprite() = 0 Or InitKeyboard() = 0
  MessageRequester("Error", "Sprite or Keyboard system can't be initialized", 0)
  End
EndIf

MyScreenWidth.i=1280
MyScreenHeight.i=720
MyScreenColorBitsDepth.i=32

     Procedure DrawCoordsFrame()
    ; Draw the frame 0,0,1280,720
     
    ; Draw 0,0 at 0,16
    DrawText(0, 16, "0,0", RGB($FF,$FF,$FF), RGB($00,$00,$00))
    
    ; Draw 1280,0 at 1280,16
    DrawText(1280-64, 16, "1280,0", RGB($FF,$FF,$FF), RGB($00,$00,$00))
    
    ; Draw 0,720 at 0,720
    DrawText(0, 720-32, "0,720", RGB($FF,$FF,$FF), RGB($00,$00,$00))

    ; Draw 1280,720 at 1280,720
    DrawText(1280-64, 720-32, "1280,720", RGB($FF,$FF,$FF), RGB($00,$00,$00))
    
        ProcedureReturn 0
  EndProcedure

If OpenScreen(MyScreenWidth.i, MyScreenHeight.i, MyScreenColorBitsDepth.i, "Ryg Crunch Addict")
  
  LoadSprite(0, RygImagePath$)
  CreateSprite(1, MyScreenWidth, MyScreenHeight)
  
  ; 1 create some random Data : 720 * 4 RGB 32 bits values 
  Length.i=MyScreenHeight.i*4-1
  Dim RandomColors(Length)
  
  For i = 0 To Length
      RandomColors(i) = $00000000+Random(255,0)+Random(255,0)*255+Random(255,0)*255*255
  Next
  
  Repeat
    
    ; Inverse the buffers (the back become the front (visible)... And we can do the rendering on the back)
    
    FlipBuffers()
    
    ;ClearScreen(RGB(0,0,0))
    
    StartDrawing(SpriteOutput(1))
     
        ; change color 0 following raster position
    
    ; principle: 
    ; 1 table:  random data with 720/3 RGB 24 bits values
    ; 2 random variable within a range
    ; rndNbOfLines: number of vertical lines to draw in table [1] color
    ; rndLineLengh: length of line = up To when horizontally the line drawing will go, range 0 to 1280
    ; 2 put raster position in color 0
    ; take line y and fill it with RandomColors(y) till line y+rnd2 up to rnd1
    y.i=0
   
    While (y < MyscreenHeight)
      height=Random(20,7);
      Box(0, y, MyScreenWidth, height, RandomColors(height))
      y=y+height  
    Wend
      
    SpriteBlendingMode(#PB_Sprite_BlendSourceColor,  #PB_Sprite_BlendDestinationAlpha)
    StopDrawing()
    
    ; Draw our sprites
    
    DisplayTransparentSprite(1,0,0,255)                      ; display the decrunch raster
    DisplayTransparentSprite(0,0,0,0)                      ; display the fur mask
    
    ExamineKeyboard()
    
  Until KeyboardPushed(#PB_Key_Escape)
  
Else
  MessageRequester("Error", "Can't open a 1280x720 - 32 bit screen !", 0)
EndIf
png at: https://postimg.cc/qhffWLQz

I would be also very interested by a plain english, simple and graphical explanation of what each blending modes do.

Thanks.


// Code-Tags added (Kiffi)
User avatar
Caronte3D
Addict
Addict
Posts: 1355
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: How to overlay 2 sprites?

Post by Caronte3D »

Please, use code tags to post code ("</>" on the above buttons).

Remove:
SpriteBlendingMode(#PB_Sprite_BlendSourceColor, #PB_Sprite_BlendDestinationAlpha)

Change:
DisplayTransparentSprite(0,0,0,255) ; display the fur mask
emm
New User
New User
Posts: 7
Joined: Tue Oct 18, 2022 7:47 pm

Re: How to overlay 2 sprites?

Post by emm »

Incredible !

It works! Thanks so much Caronte3D.

Can you explain how the mixing / blending works?
User avatar
Caronte3D
Addict
Addict
Posts: 1355
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: How to overlay 2 sprites?

Post by Caronte3D »

It's dificult to explain and I'm not an expert, is better if you test all the combinations for your self.
Also, you can read something about blending modes on many web sites about DirectX (or OpenGL):
Example:
https://www.braynzarsoft.net/viewtutori ... 2-blending
emm
New User
New User
Posts: 7
Joined: Tue Oct 18, 2022 7:47 pm

Re: How to overlay 2 sprites?

Post by emm »

Ok, thanks for the link.

As the OS I work with is Linux, OpenGL is used for rendering.

Here is what I found for OpenGL blending documentation:

https://learnopengl.com/Advanced-OpenGL/Blending

So if I want my code to be cross platforms I'll have to set somewhere that OpenGL has to be used for sake of simplicity.
Post Reply