• Advertisement
Sign in to follow this  

2D Need help achieving a programmatic 2D effect/animation

Recommended Posts

" rel="external">youtube link

at 1:38 - 1:42, purple things (I think this is particle system) that come off from the moon.

Someone else had decompiled the game in the past, and the assets shows that the dark blue area around the moon (after purple things come off) is just background image. So my assumption is that there are many of those 'purple things', that use additive blending to give different density of 'purpleness'.

The details that I'm looking at are:

  1. As those purple things come off completely from the moon, it forms jagged shapes
  2. At the edge of those jagged shapes, color blends smoothly instead of sharp turn between purple and dark blue(I know how to do it with simple shapes, but in here, the jagged shape itself constantly changes)
  3. further from edge between dark blue and purple, at the light purple direction, the density of purple is nice and smooth

I'm pretty familiar on animating objects by manipulating transform,  but this one seems like a lot of color works with programatically created shapes, any idea?

Here's a picture to clarify



Share this post

Link to post
Share on other sites

A place to start would be to choose your favorite noise function (simplex is great, although you can likely get away with something even cheaper). If you want to scale the result and control the smoothness of the outline, make it periodic (eg by sampling your noise along a circle). 

You can likely get away with sampling your outline once at the start of the effect. Just make sure it has enough points to seem detailed when fully expanded. Then map the sampled 1D noise vector onto a circle. Use the noise value as an alpha modifier for the current "ray".

Each frame increase the radius of the outline by some amount (you can increase it by a fixed amount, an amount proportional to the noise value or you can modulate it separately from a different noise vector).

Use a simple triangle strip to fill the shape. Like this:


Modulate the alpha across the shape with a separate low frequency noise function. Render this result at something like half resolution to a separate render target.

Blur the intermediate result. You can lower the size of the render target to 1/4 or even 1/8 to increase the amount of blur without paying for it. You'll have to try out different scales to find out what values suit your taste best.

Finally, blend the intermediate onto the final scene. Play around with the different noise values (frequency and type) to get the effect you want.

Share this post

Link to post
Share on other sites

I wonder if that was made procedurally or even particles. Could be "simple" polar texture mapping, animate the tex coord, use a wrapping/tiling texture and blend ... somehow. To really know, we'd need the source of that game.

You should tell what you got at your disposal (language, graphics API or engine), since if you want to go procedural you'd need pixel shader access or something, as irreversible shows.

As for procedural: It can be as complex as you want. I recommend a look at shadertoy. Here some examples which I think do something you're after or at least serve as a starting point.



(PS: I searched shadertoy with the key words plasma, halo, radial, circular and polar. Visually though the best results came back with "eclipse" :P

Edit: Here a bare example of what I had in mind above: PolarMappingAnimation .

Should have mentioned earler: shadertoy needs WebGL to work. Sorry. 

Edited by unbird

Share this post

Link to post
Share on other sites

@irreversible @unbird

Thank you, I get what you guys meant. I got an idea in mind too, I'm not sure if it's even plausible though.

I'll code and post it here to see which gives the best result.

Coming back in 2 weeks or so :D

Yes, I can use pixel shader (just trying to recreate effect on a whim, not on a project or something, I'll use anything as long as I can grasp the logic)

Edited by Ivan Reinaldo

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By owenjr
      Hi there.
      I'm pretty new to this and I don't know if it has been asked before, but here I go.
      I'm developing a game using SFML and C++.
      I would like to use the "Tiled" tool to load maps into my game but I don't actually find any tutorial or guide on how to exaclty use it (I know that I have to read an XML file and stuff). I just step into diverse projects that make all a mess. 
      Anyone knows where can I find good information to make my map loader by myself?
      Thanks in advantage!!
    • By GhostarWhite7
      Today again I painted the next drawing. I look at him and I understand that something is wrong in him. Can problems with the prospect or with black and white or with the composition or is everything terrible? help me figure it out, help.. My english is not very well, i'm from russia and i want to draw for game

    • By MHG OstryTM
      Hello guys,
      I've released my game for the first time. I'm very excited about it and I hope you'll enjoy the game - Beer Ranger. It's a retro-like puzzle-platfromer which makes you think a lot or die trying. You have a squad of skilled dwarfs with special powers and your goal is tasty beer. There is a lot of traps as well as many solutions how to endure them - it is up to your choice how to complete the level! 
      Link to the project: Project site
      Link to the Steam site with video: Beer Ranger
      Have fun and please write feedback if you feel up to.
      Some screens: 

    • By Manuel Berger
      Hello fellow devs!
      Once again I started working on an 2D adventure game and right now I'm doing the character-movement/animation. I'm not a big math guy and I was happy about my solution, but soon I realized that it's flawed.
      My player has 5 walking-animations, mirrored for the left side: up, upright, right, downright, down. With the atan2 function I get the angle between player and destination. To get an index from 0 to 4, I divide PI by 5 and see how many times it goes into the player-destination angle.

      In Pseudo-Code:
      angle = atan2(destination.x - player.x, destination.y - player.y) //swapped y and x to get mirrored angle around the y axis
      index = (int) (angle / (PI / 5));
      PlayAnimation(index); //0 = up, 1 = up_right, 2 = right, 3 = down_right, 4 = down

      Besides the fact that when angle is equal to PI it produces an index of 5, this works like a charm. Or at least I thought so at first. When I tested it, I realized that the up and down animation is playing more often than the others, which is pretty logical, since they have double the angle.

      What I'm trying to achieve is something like this, but with equal angles, so that up and down has the same range as all other directions.

      I can't get my head around it. Any suggestions? Is the whole approach doomed?

      Thank you in advance for any input!
    • By Allagia X
      An original fantasy RP game needs dedicated, self-motivated, and chill individuals! We have a story and general plot already set up, ready to be expanded upon. 

      Miasma: Twilight Decree is a 2D roleplay adventure game. It’s set in a unique fantasy world with a vast map containing continents and oceans alike. Players are given one objective: to endure the troublous environments Allagia have to offer and successfully progress through time to reach the Age of Technology. The stakes are high, and every character’s actions can alter the world – or reset everything back to the beginning ages. MTD features a blend of survival aspects, dark themes, with the ability to make a mark in the history books.

      What we're currently looking for:
      • Writers - Super creative individuals who have experience in lore-making, world-building, and know their way around fantasy writing. All of the general elements are here [setting, plot, etc.] and need some "fluffing out"[quest lines, clans/ factions/ families, etc.]. Bonus points to those who can whip up spells and skills.
      • Artists - Mainly those who specialize in pixelated art, or people who can make concept art [since we lack pictures]. 
      • Project Manager - Someone who is organized and can keep this project on the rails. As thorough as I am, it's difficult to cover all the bases on my own. 
      • Other Positions - Anything else to fill in the gaps. We currently use Wikidot for our wiki; someone with CSS and syntax experience to polish it up would be awesome. A musician/ composer for all things musical. Way later down the road, we'll need community managers, DMs, and the such, though it isn't necessary at the moment. 

      Other information:

      I've been working on this project since the beginning of 2017 with a group of friends. Life basically prohibited a lot of us from continuing on with it, and it went on hiatus for a while. I'm making an attempt to bring this back from the dead since plenty of time and effort went into it beforehand. It goes without saying that I also have a passion for roleplaying. 

      I cannot stress enough that anyone interested should be into fantasy settings or D&D. Otherwise, you're probably not going to have fun with helping!

      We do have a Patreon with a few supporters, and Discord. Until things really start moving, we'll be using Discord to collaborate. 

      For any questions, comments, or concerns, feel free to comment below or add me on discord @ Allagia X#9174 [best method of contact] for more info about this project.
  • Advertisement