Blending Mode?

BlitzMax Forums/BlitzMax Programming/Blending Mode?

therevills (Posted 2012) [#1]

Hi All, I am trying to create a fire effect, but the LIGHTBLEND blend makes it too "white" and seethru... Is there a better blend to "add" the colours together (to make them "glow") but not create the image with so much alpha? Ta!

Armitage 1982 (Posted 2012) [#2]

I know that Oddball add a new Blending mode called MOD2XBLEND with Odd2D.mod http://blitzmax.com/Community/posts.php?topic=90436 It's something quite easy to add yourself really. This new Blending mode allow you to choose the amount of light blending. 128 Red, 128 Green and 128 Blue is considered as neutral and transparent. Going over these values will give you custom Lightblend. I'm using this to do simple lightening effect in dark level of my game : https://picasaweb.google.com/118027744236209794583/MetagolfScreenshots#5678572035698158514

therevills (Posted 2012) [#3]

Thanks for that, I actually did add MOD2XBLEND, but not sure how to use it. I've just created an image with a grey background(128,128,128) and my fire image (light grey/white), but when I apply a colour via SetColor and draw it I get a square image instead of the fire image. Also SetAlpha doesnt seem to work with it?

Armitage 1982 (Posted 2012) [#4]

Yes that's probably the drawback of using Mox2XBlend... :( Sadly, I don't know any other solutions currently.

therevills (Posted 2012) [#5]

Thanks for trying to help anyway :) Any chance you could show me a quick example on how you used mod2x? Your fire effect does look cool :) I've been looking at blending tutorials and it looks like most of them use additive which I guess is LIGHTBLEND. http://blog.martincrownover.com/examples-tutorials/particle-example-fire/ I can nearly make them look good on a black background, but as soon as I use them on an image background they go to white/see-thru. Last edited 2012

therevills (Posted 2012) [#6]

I've put together this example, so you can see the issue: http://pastebin.com/vwWngCzM (Edit I broke code box :() As soon as the Cls Colour changes to a bright background, the effect is ruined :( Last edited 2012

Oddball (Posted 2012) [#7]

Have you tried laying down an ALPHABLEND base and then layering a subtle LIGHTBLEND glow over the top. I've tried a quick 5 minute hack of your pastebin code. With a little refinement and maybe a changed LIGHTBLEND sprite it might be what you are after. 'Fire particle Test ' NB: Bitmaps in DefData by matibee SuperStrict SeedRnd MilliSecs() Graphics 800, 600 AutoMidHandle(True) RestoreData Cloud001_png Global smoke:TImage = DataToImage() RestoreData Flame_png Global flame:TImage = DataToImage() RestoreData Particle005_png Global ember:TImage = DataToImage() Global intervalSmoke# = 4 Global intervalSmokeCounter# = intervalSmoke Global intervalEmber# = 20 Global intervalEmberCounter# = intervalEmber Global intervalClsColor# = 200 Global intervalClsColorCounter% = intervalClsColor Global fps_counter% = 0 Global update_frequency% = 5 Global fps_milli% = MilliSecs() Global fps% SetClsColor (0, 0, 0) Repeat Update() Render() Delay(1) Until AppTerminate() Or KeyHit(KEY_ESCAPE) Function Update() If intervalClsColorCounter> 0 intervalClsColorCounter:-1 If intervalClsColorCounter <= 0 SetClsColor (Rand(255), Rand(255), Rand(255)) intervalClsColorCounter = intervalClsColor EndIf EndIf Local x# = 400 + Rand(-100,100) Local y# = 550 For Local i% = 0 To 1 CreateFlameParticle(x, y) Next CreateSmokeParticle(x, y - 140) CreateEmberParticle(x, y - 150) TParticle.UpdateAll() End Function Function Render() Cls TParticle.DrawAll() SetColor 255, 255, 255 SetAlpha 1 SetBlend ALPHABLEND SetScale 1, 1 SetRotation 0 Local tx%, ty% = 10 Local gap% = 15 DrawText "FPS:"+fps, tx, ty ty:+gap DrawText "No. of Particles = " + TParticle.list.Count(), tx, ty ty:+gap DrawText "Changing Cls Colour in = "+ intervalClsColorCounter, tx, ty ' FPS counter fps_counter:+1 If fps_counter = update_frequency fps = 1000 / Float(((MilliSecs() - fps_milli)) / update_frequency) fps_milli = MilliSecs() fps_counter = 0 EndIf Flip 1 End Function Function CreateEmberParticle(x#, y#) If intervalEmberCounter> 0 intervalEmberCounter:-1 If intervalEmberCounter<= 0 Local p:TParticle = TParticle.Create(ember, x, y, 1) p.SetRGB(255, 128, 0) p.dy = Rnd(-2, -1) p.rotationSpeed = Rnd(-.5, .5) p.gravityY = 0.01 p.scale = Rnd(0.03, 0.05) p.SetFade(10, 60, 40) p.rotation = Rnd(360) p.blend = LIGHTBLEND intervalEmberCounter = intervalEmber EndIf EndIf End Function Function CreateSmokeParticle(x#, y#) If intervalSmokeCounter > 0 intervalSmokeCounter:-1 If intervalSmokeCounter <= 0 Local p:TParticle = TParticle.Create(smoke, x, y, 1) p.SetRGB(128, 128, 128) p.dy = Rnd(-1, 0) p.rotationSpeed = Rnd(-.5, .5) p.gravityY = -0.02 p.scale = 1 + Rnd(.25) p.SetFade(80, 10, 80) p.maxAlpha = .1 p.rotation = Rnd(360) p.blend = ALPHABLEND intervalSmokeCounter = intervalSmoke EndIf EndIf End Function Function CreateFlameParticle(x#, y#) Local z%=Rand(0,3) Local p:TParticle = TParticle.Create(flame, x, y, Not z) p.SetRGB(255, 80, 0) p.dy = Rnd(-1, 0) p.rotationSpeed = Rnd(-1, 1) p.gravityY = -0.02 p.scaleSpeed = -0.001 p.scale = .35 p.SetFade(30, 30, 35) p.rotation = Rnd(360) If z p.blend = ALPHABLEND Else p.blend = LIGHTBLEND EndIf End Function Type TParticle Field x#, y# Field dx#, dy# Field gravityX#, gravityY# Field rotation# Field rotationSpeed# Field scale# = 1 Field scaleSpeed# Field alpha# = 1 Field maxAlpha# = 1 Field image:TImage Field blend% = ALPHABLEND Field r% = 255, g% = 255, b% = 255 Field fadeIn# = 0 Field fadeSustainCounter# = 0 Field fadeCounter# = 0 Field fadeInLength# = 0 Field fadeLength#=0 Global list:TList Function Create:TParticle(image:TImage, x#, y#, z%) If list = Null Then list = New TList Local p:TParticle = New TParticle p.image = image p.x = x p.y = y If z list.AddLast p Else list.Addfirst p EndIf Return p End Function Function DrawAll() If Not list Return For Local p:TParticle = EachIn list p.Draw() Next End Function Function UpdateAll() If Not list Return For Local p:TParticle = EachIn list p.Update() Next End Function Method SetFade(theFadeInLength%, theSustain%, theFadeLength%) If theFadeInLength > 0 Then fadeIn = 1 alpha = 0 Else fadeIn = 0 EndIf fadeInLength = theFadeInLength fadeSustainCounter = theSustain fadeLength = theFadeLength If fadeIn = 0 Then fadeCounter = fadeLength Else fadeCounter = 0 EndIf End Method Method Update() x :+ dx y :+ dy If gravityY <> 0 dy :+ gravityY EndIf If gravityX <> 0 dx :+ gravityX EndIf If rotationSpeed <> 0 rotation :+ rotationSpeed EndIf If scaleSpeed <> 0 scale :+ scaleSpeed If scale < 0 Then scale = 0 EndIf If fadeIn fadeCounter:+1 If fadeCounter >= fadeInLength fadeCounter = fadeLength fadeIn = 0 alpha = maxAlpha End If Else If fadeSustainCounter > 0 fadeSustainCounter:-1 If fadeSustainCounter <= 0 Then fadeSustainCounter = 0 fadeCounter = fadeLength End If Else If fadeCounter > 0 Then fadeCounter:-1 If fadeCounter <= 0 Then alpha = 0 Kill() EndIf EndIf End Method Method Kill() list.Remove(Self) End Method Method Draw() SetBlend blend If fadeCounter > 0 Then If fadeIn Then alpha = fadeCounter / fadeInLength If alpha > maxAlpha Then alpha = maxAlpha Else alpha = fadeCounter / fadeLength If alpha > maxAlpha Then alpha = maxAlpha EndIf EndIf SetAlpha alpha SetColor r, g, b SetScale scale, scale SetRotation rotation DrawImage image, x, y End Method Method SetRGB(r%, g%, b%) Self.r = r Self.g = g Self.b = b End Method End Type 'graphics Function DataToImage:TImage( flags:Int = -1 ) Local myhex$ = "0123456789ABCDEF" Local w:Int, h:Int, line$ ReadData w ReadData h Local img:TImage = CreateImage( w, h, 1, flags ) Local tp:TPixmap = LockImage( img ) For Local y:Int = 0 To h - 1 ReadData line$ For Local x:Int = 0 To w - 1 Local word$ = Mid$( line$, x * 8 + 1, 8 ) Local pixel:Int = 0 Local shift:Int = 28 For Local i:Int = 1 To 8 pixel :+ (Instr( myhex$, Mid$(word$, i, 1) ) - 1) Shl shift shift :- 4 Next WritePixel( tp, x, y, pixel ) Next Next UnlockImage( img ) Return img End Function Use the DataDefs from the pastebin as they break the codebox. Last edited 2012

therevills (Posted 2012) [#8]

Thanks for trying Oddball, yep thats okay and I have tried it, but it still doesnt look as nice.... I'm thinking of just bloody creating an image animation now :( I've been doing some research: http://gamedev.stackexchange.com/questions/22989/how-can-i-achieve-a-good-fire-effect-with-alpha-blending-and-particles So this post's solution is rendering to a texture, which is a bit slow in BlitzMax... The last post also suggests premultiplied alpha... which I couldnt get to work, I tried: glBlendFunc GL_ONE, GL_ONE_MINUS_SRC_ALPHA Which I thought was what they were talking about here: http://blogs.msdn.com/b/shawnhar/archive/2009/11/06/premultiplied-alpha.aspx

col (Posted 2012) [#9]

Hiya guys. Not sure if this blend table can help you decide the correct blend mode to use to get your desired effect......

therevills (Posted 2012) [#10]

Ta Dave... sometimes when I mess with the blend functions I totally lose the alpha in the background, so I end up drawing squares... Samah has suggested that I use a sort of masking function: * Draw the particle as a mask with ALPHABLEND * Draw the particle normally with LIGHTBLEND Of course this means you are doing twice as much drawing as normal... but it kindof works: http://pastebin.com/wEQMDR8d Last edited 2012 And heres a few images of it: On a black background... looking good: On a pink background with no masking... not looking good: On a pink background with with masking... looking decent: Last edited 2012

col (Posted 2012) [#11]

Nice :) The blending/masking works well there!

Armitage 1982 (Posted 2012) [#12]

The mask method is pretty cool but indeed require a second pass. That's mainly why I was searching a more efficient way to draw more sprites on the screen in batch mode for example. This is really important with particles because the Max2D isn't focus on speed but on ease of use. Rendering is currently the only slow part in my game and particles is barely ok with 5 "viewport" rendering (with all game "stuff" included, 4 players split screens and another floating camera, you can eventually reach something like 1024 particles pool x 5 without too much slow down and you can certainly improve this in many ways ;). I will think about it for my next engine (full openGL or not ?). Currently my fire effect only work great on dark areas like you said before (fire is visible thanks to color and shadows after all no ?). I'm only using Mod2xBlend for the bright effect around my fire and like it's discussed in another topic the disadvantage is that everything rendered before is affected like parallax, etc. But well, it is superfluous to fix this detail in my case so :D Is fire a dynamic object in your game ? Cause sometimes you can reach a better look'n'feel with animated images of a real fire (or pre-rendered fire with alpha in TimelineFx for example, you may also take a look at the realtime module of it, great particles engine !). With nowadays RAM it's another alternative. Particles releasing particles give impressive results visually but consume a lot of processing time if not very optimized.

therevills (Posted 2012) [#13]

Is fire a dynamic object in your game ? Yeah I did want it to be... or pre-rendered fire with alpha in TimelineFx I didnt know that TimelineFX can output to a pre-rendered files... I guess it's disabled in the demo, I can't even see an option for it. How do you do it? Found it! Right-click on the effect in the library and select Animation Properties, then click the "record" icon... Last edited 2012 Last edited 2012

AdamRedwoods (Posted 2012) [#14]

blend modes are tough to fiddle and get it exact. To do this dynamically, you could try to render to an FBO texture (color 0,0,0 with alpha 0) and just draw the texture quad.

Armitage 1982 (Posted 2012) [#15]

True, but don't forget that FBO cannot be achieved on many GMA card (notebook, old system, etc.) because GL_EXT_framebuffer_object is missing from the OpenGL extensions.