Sunday, January 17, 2016

Parallax Background + Animations

What's up?

Not much, just working on getting the parallax background system set up.  BlazBlue's 3d rendered backgrounds are a bit beyond me right now.  In place of that we have 4 layers of background moving by at different speeds.  

Here are the current WIPs:

Sky

Mountains, far bg 
Trees, close bg (out of order here ^^;)

Foreground

Ultra foreground


Can't you just drop the images in and move on?

Well we can but the background images will get pretty long so we have to slice them up into pieces.  Then we have to load those pieces in when they're needed.  Right now we aren't worrying about only loading things near the character, but later if we need to then having the backgrounds already sliced up will be a big help.

Aren't static images too boring?

Yes absolutely they are, which is the other reason that slices will help.  The plan is to drop some animation sprites on top of those slices.  Also right now seems like a great time to take care of some image sizing issues.  Right now we are manually moving all kinds of images so that they are in the right spot, and that just won't do!!!  Not at all sir!




Here everything is being manually moved by an offset value like -40, -240.  And the pictures are being scaled by some eyeballed value of .8 or something.  Yuck. Yuck yuck yuck.  bgLayerSprite[] is the array holding the background images.  We'll change that to an arrayList of 


Before we start to figure out how to do animations, let's figure out how to properly offset and scale these images so we don't need any eyeballed offsets.

*30 minutes later*

Argh..hm..

What's the issue?

Well the code has gotten pretty messy by now with all those different cameras running around.  The parallax camera is 3 different matrix projections, and we also have our game camera, and there's the tiledmap display as well as the hud camera.. I'm not sure where our 'viewing' camera has gone, and with all of the projection matrixes and camera.combined's, I'm lost!  Need to understand how the cameras are working a little better.  ^^;

Hmm what is the difference between a viewport and a camera?

http://gamedev.stackexchange.com/questions/75991/camera-vs-viewport  

This tells us that a viewport is like a TV screen and a camera is the tool used to make the movie.  So unlike real life cameras which are constantly recording something, the cameras in programming are blank unless we put something in front of it.   Umm..

*Literally days later* 

Man.. one thing leads to another which leads to another and so on until we've built a country and annexed a small landhold and angered the neighboring Steward, causing him to cut off our vital supply of fine cloths and spices, all because we were trying to clean out a dusty cupboard.  And here's a git repository: https://github.com/jaymefosa/NightmareEscape

 In the end we finally got the parallax scrolling to be as automated as possible:







We just need to change the (.1f, 1) to a .5f or .9f to bring it closer to the camera

- game.batch.setProjectionMatrix(camera.calculateParallaxMatrix(.1f, 1));  
bgLayerFarAtlas.findRegions("bg").get(i).getRegionWidth() * .1f)) 



What were you doing again?

I've been mulling over how to implement background animations.  I think we'll go with a BackgroundAnimationController class which will be responsible for holding an array of 'near' animations.  We'll play those ones on their respective timers.  If the animation is going constantly it wouldn't be as cool as if it stopped and started sometimes right?

Then each animation sprite will just have its position set similarly to the above parallax offsets.  This method wasn't satisfying because that means  we'll need to know the local position of the animation on its respective background.  That is totally not satisfying.  Not at all.  Horsefist.  

Also I wanted to do some background deforming animations and this method doesn't do much to aid that.  At least this method will include reading an XML file so that we can add animations without having to change the source code.  

Here's a gif of what we're going for.  Just a nice small test case to get all automated and ready for the creative floodgates to be unleashed!! (It's a little bigger before uploading to blogger)  Can you see it?  The little smoke rising from the house near the right rock?  Isn't it beautiful? <3_<3


I gotta say.. seeing even this much really whets the appetite for terrain deforming animations.  Let's just say that we'll plan to have terrain deformed animations actually just be a regular animation, and we will transfer any of the mountains or whatever that would be moving to an animation sprite.  Boom.  Bam. Done.

Here is our smoke animation and timer:  



Lots of contrived values but we'll change it to be an automated XML reading system.  Well we spent about 4 days working on that so it's time for a video update!




Pardon the ridiculous quality, still trying to figure out how to make decent videos @_@

Also this should go without saying: any comments, critical or otherwise, about the art or programming are more than welcome.  Fire away~!

No comments:

Post a Comment