> | | | | | | > The Camera Can Capture Your Soul

The Camera Can Capture Your Soul

Posted on Thursday, July 19, 2012 | 1 Comment

I have to say, this blog is great for me in terms of making progress on my game.  "But Chris, how can you be making progress on your game while wasting time writing a silly post on your blog?" you might ask.  Well, you see, there are a lot of things I can work on related to my game right now, but I'm trying to focus on the core of it -- the programming.  It can be easy to get burnt out on programming when running into a particularly nasty bug in your code or if you just spend too much time in front of your code window, so it's important to get away when you need to.



I try to do that, but I've noticed that every time I've posted since this blog's revival, it's rekindled the flame for me to want to get back in FlashDevelop and start coding.  It probably has to do with the fact that each time I post, I am forced to recall the details of my current coding adventure and thus am drawn back to thinking about it, but instead of thinking of current parts that may be aggravating me, I am thinking about challenges that I have already overcome.

There is a lot involved even in things that seem simple, so having to think of all the small details of the things I've already accomplished makes it feel like a lot more and that gives me some motivation and some courage to get back in the coding window and get things done!  It can be rough during bug-tracking sessions, especially if the bug happens infrequently, so being able to get motivation like that is crucial.

Another thing that motivates me is knowing that once I complete this game, I will have an easier time coding my next games because I'll be able to re-use code.  I'll probably be able to re-use a lot of code, too, which is one of the benefits of tile-based games.  I have an incredible idea for a Gradius and The Guardian Legend cross-breed of game and already have code in Otto's Odyssey that I can re-use for it.  I also have game ideas for several role-playing games -- definitely one of my favorite genres -- and I will be able to re-use code for them as well!

Anyway, back to our discussion from last time... I'd just gotten my map displaying properly with the images I had created, but now I needed a way to make it move around like in NES and SNES games.  This is done with the FlxCamera object and it's a little tricky to figure out at first, at least it was for me because I couldn't find any examples of it being used so I had to mess with the parameters myself.  Again, documentation is key in situations like this, but sometimes you need to change up your internet searches because being able to see something used in code AND having the documentation is much more helpful than just having the documentation!

There's no FlxCamera in the code written in the tutorial from the last couple posts, so every bit of information counts.  I did eventually come across a forum post from somebody that was having issues getting their FlxCamera to work properly.  The person had their code posted and a few people had replied, but just seeing his code helped me out immensely -- the forum post can be found here.  There was actually a lot I wasn't doing properly with the camera after I saw this code.

First of all, I was not setting the boundaries of the world with the "worldBounds" method of FlxG and I was not setting the camera boundaries with "camera.setBounds".  I also hadn't added the camera update into my update function and hadn't set the camera's "follow" method.  Basically, I had everything messed up!

Well, after some tinkering I discovered that Tilemaps have a built-in method called "getBounds" that works perfectly for "worldBounds", so you can can simply write:

FlxG.worldBounds = level.getBounds();
 Setting the boundaries of the camera is pretty simple as well, the method is straightforward:
public function setBounds(X:Number = 0, Y:Number = 0, Width:Number = 0, Height:Number = 0, UpdateWorld:Boolean = false):void
X and Y form the point where you want the camera's upper-left-most boundary to be and then you simply specify the width and height of the boundaries.  You can ignore the last parameter.  Specifying the width and height is easily done with the built-in properties of the Tilemap, "width" and "height".

I actually had issues with my map and camera working correctly together, because I am not drawing the map at (0, 0).  The first couple rows of tiles are reserved for a GUI area, so I moved the map down 32 pixels.  I ended up having to adjust the "height" property of the camera "setBounds" method to compensate and now it works perfectly.  My code looks like this:
FlxG.camera.setBounds(0, 0, level.width, level.height + 16);
The next method to implement, the "follow" method, tells the game what object you want the camera to follow.  However, it also has a parameter that allows you to specify what type of follow movement you want the camera to have.  Most of these preset camera movements have a deadzone, which is basically a box around the follow object and the camera won't scroll until the object gets to the boundaries of the box.  This is a common type of camera movement in tile-based games.

Unfortunately, the built-in presets weren't quite what I was looking for.  Solving the issue is fairly simple though, since Flixel allows you to specify your own camera deadszone!  Figuring out the deadzone is the tough part.  I did it by trial and error; basically I decided how many tiles of deadzone I wanted before the camera would start scrolling and then I multiplied it by my tile width because it needs the width/height in pixels, not tiles.  Right now, the player gets 4 tiles of deadzone on the x-axis and 5 on the y-axis.  As I am developing the game, though, I am realizing that I will have to change the camera's behavior at certain times depending on the room the player is in.  The code I ended up with looks like this:
FlxG.camera.deadzone = new FlxRect((FlxG.width / 2) - 32, (FlxG.height / 2) - 24, 64, 80);
I should really be using a variable like tileWidth instead of just (- 32) and such, but I am lazy and am not too concerned with how it makes my code look.  Well anyway, the camera now works properly!  If you recall, I mentioned having a GUI area.  I just thought you should know, if you plan on having something similar in your game, be sure to set "scrollFactor" to "0" for both X and Y, or else the GUI will scroll around with the map when your player moves!

This post is getting pretty long, so I'll try to wrap things up here.  Also, I have been thinking about incorporating images into the blog so that it looks a little more lively and makes gigantic chunks of text like this a little more palatable.

With all the basics of a tile-based platforming game in place, it was time to make a test level and see what my friends and family thought of it!  There wasn't anything else to do but run and jump, so I made a little flag graphic to put in the level as a sort of goal to get to.  Touching it didn't actually do anything, though.

I made a maze type of level in Mappy that was large enough for the map to be able to scroll in every direction.  While making the level, I noticed some collision issues and decided that it would be best to reduce the player's bounding box, using the width and height properties.  I discovered you need to set the "offset" as well if you do this, because it adjusts the display of the image.

Anyway, you can see this first level here in all its glory!  You can also browse my portfolio and look at the more current versions of the game if you want, but it would probably be cooler if you just looked at them as I blog about my progress so you can sort of see the entire process unfold.  Also, if you're a developer who's come across my blog while Googling for help on Flixel or tile-based games, feel free to comment!  I'd love to talk about some programming stuff or answer any questions you may have.

I hope you've enjoyed this post.  Look forward to hearing more from me shortly.  I shall return with another chapter in the history of my independent game development progress!

Take care!

Comments:1

Powered by Blogger.