Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Show a sprite being hit like in the arcades. - Gideros Forum

Show a sprite being hit like in the arcades.

Ok, so sometimes you shouldn't believe everything you read.

For example, in the Gideros instructions it says that the setColorTransform command takes parameters from the value 0 to 1. That's kinda not true.

But, it's a useful 'not true' as it means you can add a nice effect used in arcade games for when a sprite gets hit. In an arcade game they usually flash white.

Normally you would have to have a white 'mask' of the sprite or do some fancy shader coding, but in reality you don't because the setColorTransform limit is actually not 1...

Here is my game sprite:


Here is code that has a much higher than 'valid' value for the setColorTransform...


Want to make it red instead? ...


So, it's that easy! After a frame just set the transform back to normal (1,1,1) and the original colours will be restored.
2019-07-10_15-41-12.png
530 x 325 - 123K
2019-07-10_15-38-41.png
673 x 479 - 169K
2019-07-10_15-37-42.png
693 x 547 - 199K
+1 -1 (+4 / -0 ) Share on Facebook

Comments

  • SinisterSoftSinisterSoft Maintainer
    btw, Sorry I didn't mention this trick earlier, I thought most people knew about it - a friend was just discussing how they were having to make a shader to do this exact same thing - so I thought I'd let you all know. :)
  • hgy29hgy29 Maintainer
    Actually, it may work or not depending on the GPU...
  • SinisterSoftSinisterSoft Maintainer
    Seems to work on most things. :)
    (everything I've tried)
  • Hi guys! That was very nice quick tip, thx!

    I have one similar question: how to fill whole sprite with definite RGB or hex color?
    temp_sprite:setColorTransform(46, 204, 113, 1) --it doesn't work (I've tried to multiply/divide it too)
    image
    sprite_fillWithRGB.jpg
    512 x 138 - 16K
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • Apollo14Apollo14 Member
    edited October 10
    p.s. uh, I partially got this working
    if my temp_sprite is 100% white, I can fill it with colors:
    temp_sprite:setColorTransform(46/255, 204/255, 113/255, 1)
    Now how to fill non-white pictures with color? It has something to do with blending?
    image
    kojima.jpg
    300 x 180 - 10K
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • what effect are you trying to achieve, make the whole body the same color? Have you tried https://wiki.giderosmobile.com/index.php/Media ?
  • you can set up a simple shader to do that, if nothing else works.
  • Apollo14Apollo14 Member
    edited October 11
    MoKaLux said:

    what effect are you trying to achieve, make the whole body the same color? Have you tried https://wiki.giderosmobile.com/index.php/Media ?

    I want to simply fill multi-colored sprites with one plain color:
    image

    If sprite is white, this code works:
    temp_sprite:setColorTransform(46/255, 204/255, 113/255, 1)
    But if sprite is multi-colored, it doesn't work.

    temp_fillWithColor.png
    451 x 369 - 23K
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • Apollo14Apollo14 Member
    edited October 11
    I guess it can be done with blending?
    http://forum.giderosmobile.com/discussion/6742/2016-10-sprite-setblendmode-src-dst

    http://docs.giderosmobile.com/reference/gideros/Sprite/setBlendMode#Sprite:setBlendMode
    http://wiki.giderosmobile.com/index.php/Sprite:setBlendMode

    But either I am stupid or it's not documented enough for noobs like me, I've no idea how to do even simple stuff, how to actually use them blendmodes and rendertarget.
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • @Apollo14
    It seems that most of the values do not work, the wiki page seems very outdated?
    The only values I could get are:
    -- set blend mode
    application:setBackgroundColor(0x121212)
    local mysprite = Sprite.new()
    local mybitmap = Bitmap.new(Texture.new("gfx/enemy01.png"))
    local mypixel = Pixel.new(0x00ff00, 1, 30, 30)
    mysprite:addChild(mybitmap)
    mysprite:addChild(mypixel)
     
    mysprite:setBlendMode(Sprite.ADD)
    --mysprite:setBlendMode(Sprite.ALPHA)
    --mysprite:setBlendMode(Sprite.MULTIPLY)
    --mysprite:setBlendMode(Sprite.NO_ALPHA)
    --mysprite:setBlendMode(Sprite.SCREEN)
    stage:addChild(mysprite)

    Likes: Apollo14

    +1 -1 (+1 / -0 ) Share on Facebook
  • hgy29hgy29 Maintainer
    setColorTransform alone can’t do that, because it multiplies the texture color by whatever you passed in parameters. So it will give what you expected only if the texture color is 1,1,1 (white).
    A custom shader would do the job easily, as @keszegh suggested.

    Likes: Apollo14

    +1 -1 (+1 / -0 ) Share on Facebook
  • thank you for your insight. Every shaders seem to be custom shaders :p
    At my level I would have gone the render target way but it may be slow for what you are doing!

    BTW I had a last try you can experiment with:
    -- set blend mode
    application:setBackgroundColor(0x0055aa)
    local mysprite = Sprite.new()
    local mybitmap = Bitmap.new(Texture.new("gfx/enemy01.png"))
    local mybitmap2 = Bitmap.new(Texture.new("gfx/enemy01.png"))
    --mybitmap2:setColorTransform(255/255, 255/255, 255/255, 1)
    mysprite:addChild(mybitmap)
    mysprite:addChild(mybitmap2)
     
    mysprite:setBlendMode(Sprite.ADD) -- bright color
    --mysprite:setBlendMode(Sprite.ALPHA)
    --mysprite:setBlendMode(Sprite.MULTIPLY) -- dark color
    --mysprite:setBlendMode(Sprite.NO_ALPHA)
    --mysprite:setBlendMode(Sprite.SCREEN)
    stage:addChild(mysprite)
  • hgy29hgy29 Maintainer
    Actually there could be way using alpha blending operators I think. The idea would be to ignore source color and use destination color in combination with source alpha:
    a) Fill your target area with the color you want your sprite to be in
    b) draw your sprite with blending factors ZERO for source and SRC_ALPHA for destination

    I didn't try but in theory that should work

    Likes: Apollo14

    +1 -1 (+1 / -0 ) Share on Facebook
  • hgy29hgy29 Maintainer
    It was a bit trickier than I thought, because Gideros doesn't output pixels with 0 alpha values, but with the help of stencil it can be done:
    local star=Bitmap.new(Texture.new("star.png",true))
    stage:addChild(star)
     
    local bluestar_tex=RenderTarget.new(star:getWidth(),star:getHeight())
    local bluestar=Bitmap.new(bluestar_tex)
    stage:addChild(bluestar) bluestar:setX(160)
     
    --Here is the magic
    -- Clear our render target to all alpha
    bluestar_tex:clear(0x000000,0)
    --[[Gideros don't draw pixels with alpha value of 0, 
    they are discarded at early stage. Use the stencil to get a
    footprint of visible pixels of source image]]
    star:setStencilOperation{ stencilClear=true, stencilWriteMask=1,
    	stencilFunc=Sprite.STENCIL_ALWAYS,depthPass=Sprite.STENCIL_INCR }
    bluestar_tex:draw(star)
    --Render the footprint in the color we want
    local mask=Pixel.new(0x0000FF,1,star:getWidth(),star:getHeight())
    mask:setStencilOperation{ stencilClear=false, stencilMask=1, stencilWriteMask=1, 
    	stencilRef=0, stencilFunc=Sprite.STENCIL_NOTEQUAL,
    	depthPass=Sprite.STENCIL_KEEP,
    	stencilFail=Sprite.STENCIL_KEEP}
    bluestar_tex:draw(mask)
     
    --[[ The result is possibly enough here, but we lost the smoothed edges of
    the original texture in the process. We can restore them with a smart alpha
    blending trick:]]
    star:setBlendMode(Sprite.ZERO,Sprite.SRC_ALPHA)
    bluestar_tex:draw(star)
     
    --Restore our initial bitmap blending mode, to show it on screen as usual
    star:setBlendMode(Sprite.ALPHA)
    +1 -1 (+3 / -0 ) Share on Facebook
  • works perfectly, the only problem is understanding the code :o

    Likes: Apollo14

    +1 -1 (+1 / -0 ) Share on Facebook
  • Thank you guys!! You're awesome!!
    I'll try to understand it after morning meditation when my mind is fresh :D :D

    Likes: MoKaLux

    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
    +1 -1 (+1 / -0 ) Share on Facebook
Sign In or Register to comment.