Toon styled water
So in this game I have been working on, the artist made a painted concept sketch/mockup of how the level graphics could be, like this:
And my first reaction was something like, oh noes, now they want some kind of water/fluid simulation stuff and this should run mobile. But then I thought about it some more and some different approaches and eventually came up with this.
A way to do toon-like water/ripples/edge foam for dynamically generated levels.
(Note. This might have been done in better ways before, haven´t really looked in to it.)
What I’m talking about here is the edges/outline of the objects, just to be clear.
The idea is that you draw like a “depthslice” of the surface of your water to a texture/rendertarget white on black, like you were looking straight up or down with no perspective. Then you run a blur-pass on that texture/rendertarget, this is used for the “ripples”. Then, without clearing, you draw once more on top without the blur, this is to get the hard outline.
So now you have a texture that looks something like this:
Then you feed this texture/rendertarget to a shader.
In the shader we take the pixel value and multiply it by a larger number and run that value through a sin-function along with time. This makes the gradient part “peak” and animate outwards with time.
If we then “cut off” these peaks when they are above a certain threshold and then set that value to 1, we get the ripples.
Also to get some more “life” in it, we feed the shader with another texture, like a noise pattern of some sort. We can then move it and use the pixel-value to remove the ripples on some places to get it to look less static. And also to offset/wave everything a bit and also to make bigger ripples.
The end result in the game was like this:
In my usecase the levels were static, as in no objects moved around, so the setup could be done once in the beginning of each level. I also only had square and round objects. So what I did was to draw sprites, according to how the level looked, to a offscreen orthographic camera. Then render that once with the blur and once more with no blur on top.
If you were to have moving objects that should be included, you would have to render this all the time. And possibly do some kind of “depthslice” of the real geometry along the surface of the water. I have not looked in to that.
Check out this test on youtube to see it running:
Here is a link to that proof-of-concept unity-project on github.
This was fast-hacked just to test the idea, so it’s very rough and not production-ready code.
And if you want to play the game, it is here: App Store and Google play. It is a logic puzzle game.
Edit: 2019-01-24
I revisited this one and looked into doing a “dynamic” version with moving objects. You can check out a test here:
Leave a comment
-
It’s time for the big journey! Experience Nomadic Tribe, our interactive tale for this new year. Happy 2019 from ma… twitter.com/i/web/status/1…
-
Did another iteration of this "toon styled water"/edgefoam thing, this time with a depthslice so the objects can be… twitter.com/i/web/status/1…
-
Trying to solve a problem for like 6 hours. Go home, eat, sleep and then come back the next day and solve it within 30 minutes... ¯_(ツ)_/¯
-
Is this intelligence? Discuss (Some might say "Obvs not! Just a reaction betw dye & environment driven by laws of p… twitter.com/i/web/status/1…
-
Choir for [adult swim] - adultswim.com/etcetera/choir/. Audio by @krighxz. https://t.co/na5twp4UgA
Categories
Blogroll
- actionscript microcosmos
- Alternativa Platform blog
- Andre Michelle
- Antti Kupila
- Ars Thanea Blog
- astatic notes
- b-log – betriebsraum weblog
- betaruce
- blog-o-fobik
- blog.joa-ebert.com
- Cheezeworld
- Chris O'Shea
- Coding Cowboys
- CreativeApplications.Net
- Darren Richardson
- Dead End Thrills
- Designchapel
- Everyday Flash
- Everything Visual
- flash platform!
- franto.com
- gaming your way – blog
- gBlog
- generalrelativity
- generalrelativity
- Keeping track of myself
- KevLinDev Blog
- lessrain blog
- metablog
- Mike Chambers
- MoiK78 blog
- moockblog
- neurofuzzy
- North Kingdom
- Over Here
- Peter Elst
- peter nitsch.net
- Photon Storm
- PICNIC WITH PANIC
- pixelbreaker
- pixelconsumption
- Play with Motion
- polygonal labs
- Power-up Media Blog
- Quasimondo
- Razorberry's Adobe Flash Blog
- RIAgora
- ricardo cabello
- Simon Wacker
- simppa.fi/blog
- Sönke Rohde
- The efnx code blog
- toxi.in.process
- trace(myBitmapdata);
- UnitZeroOne
- w3blog
Archives
- December 2018
- September 2018
- December 2017
- November 2017
- December 2016
- December 2015
- December 2014
- December 2013
- May 2013
- April 2013
- December 2012
- July 2012
- June 2012
- January 2012
- December 2011
- October 2011
- December 2010
- December 2009
- January 2009
- December 2008
- December 2007
- June 2007
- February 2007
- December 2006
- October 2006
- September 2006
- August 2006
- June 2006
- December 2005
- October 2005
- September 2005
- August 2005
- March 2005
- December 2004
- November 2004
- October 2004
- September 2004
- August 2004
- June 2004
- April 2004
- March 2004
- December 2003
- September 2003
- August 2003
- July 2003
- May 2003
- April 2003
- February 2003
- January 2003
- December 2002
- November 2002