WCK Camera Boundary Detection Example + Code

Post about the Flash World Construction Kit and the Alchemy port of Box2D.
burtonposey
Posts: 93
Joined: Tue Nov 09, 2010 1:26 am

WCK Camera Boundary Detection Example + Code

Postby burtonposey » Wed Jun 22, 2011 8:39 pm

Hey guys,

Thanks for being patient. I'm in the middle of an incredible rush to get a KickStarter project pitch ready for launch this coming Sunday. If you appreciate the effort I put into writing this tutorial, you can take a look on KickStarter this weekend for a Unity iPad game project called Robots Love Ice Cream or follow @addogames on Twitter and we'll be shamelessly promoting (like I am here). Thanks in advance for anyone supporting my dream.

Anyways, on to the meat and potatoes...

1. Grab this zip file from my server. Unzip the folder.

2. Copy the files over. addogames folder is new. The fla goes in the wck demo folder.

3. Open up the file and go into the Boxman derived demo on the timeline (It's the only demo used. Sorry I didn't clean out the others). You'll notice it's called AddoCameraBoundaryDemo and if you peek at both the BaseClass and component property linkages, they point to addogames.AddoWorld. This class is an extension of wck.World.

4. On the stage and in the demo MC, you'll see a MovieClip based object that covers pretty much the whole level. It's an instance of worldBoundsMC and is called in this demo worldBoundsTarget. If you step one level up and look at the component properties for the AddoCameraBoundaryDemo, you'll see there's a new property called worldBoundsName. This is where you designate the MC you'll use to restrict the camera's movement capabilities. This MC doesn't have to be centered, which is nice. It wasn't originally written that way, but moving a ton of stuff around time and time again to accomodate this shortcoming made it obvious I need to account for the position of this MC wherever it ended up.

5. Open up AddoWorld.as. Note that it extends wck.World. It has a few new variables that you can see. Take note of the first 4. The first one is your component property noted in step 4. The second one, worldBoundaryRef, is the reference that gets retrieved and stored locally. The next two are 1/2 the stage width and height.

6. In create(), only things to note are that I'm calling super.create() (always a good idea) and I'm storing the reference to the world boundary target and calculating the world half height and width values.

7. Note I'm overriding updateScroll(). Most of this is identical to Jesse's code, but note on line 75 and 76 that I'm applying the camera offsets. Again I'll get to those, but wanted to point out changes as we move through the file. Next lines to note are 99-109. This is where the magic happens especially the callout to positionAgainstWorldBoundary(int, int).

8. positionAgainstWorldBoundary(int, int) - this is the meat and potatoes of this camera system. It basically takes the focus target, any applied offsets, and then compares it to the world boundaries and includes the 1/2 stage width and height offset. This is the account for the fact the focus target, by default, is in the center of the screen. I've been through this math so many times and I left those traces in there as a reminder to take your time if you make any changes to this and understand the math. I actually had to change this stuff again, for reasons not clear to me, tonight when I wrote this example up.

9. So all of this stuff makes the magic happen. If you haven't already, run the file and drag your boxman up to the corners and sides of the level. Pretty cool, huh?

10. Now the two class variables I've been sidestepping, camera_XOffset and camera_YOffset. These two precious gems actually let you move the camera to a point in the level offset of the focus target. This is useful for things like a cinematic camera, where the player is frozen, and the camera can move over to a new value. I initially built it because if you play old school games, you'll notice they change the camera positioning to show what is below the player when there is a steep drop or ahead if there's not a lot of time to react to something.

So the homework for you guys who use this stuff is to implement TweenLite or TweenMax (they're the best, trust me, I'm a doctor) and rig up a button in your game. When you hit the button, tween the camera X and Y offset values. Pretty cool stuff. You can see this camera system working in the project I wrote this code for. Go to episode 4 (I think). As soon as the level starts, you'll see the player is locked down and the camera moves in between a few points.

I hope this really helps you guys out. Sorry I haven't been active lately. Really doggedly pursuing this first indie release for my company. So, follow @addogames and give me a shout out. Shoot a video of what you did and send me a link.

Take care!
Last edited by burtonposey on Tue Apr 21, 2015 6:21 am, edited 1 time in total.

goJohnnygo
Posts: 18
Joined: Mon Jun 13, 2011 2:52 pm

Re: WCK Camera Boundary Detection Example + Code

Postby goJohnnygo » Wed Jun 29, 2011 10:21 am

I tried searching for "Robots Love Ice Cream" on Kickstarter but nothing was returned. Am I missing something?

I haven't had a chance to look at your camera boundary detection yet, but I will def do it when I start fine tuning my game. :D

burtonposey
Posts: 93
Joined: Tue Nov 09, 2010 1:26 am

Re: WCK Camera Boundary Detection Example + Code

Postby burtonposey » Wed Jun 29, 2011 12:12 pm

No you aren't doing anything wrong, :)

We're actually launching it between tonight 6/29 and tomorrow morning 6/30. Thanks for checking. Check tomorrow and everything should be cranking.

MrMushroom
Posts: 4
Joined: Mon Apr 16, 2012 3:38 pm

Re: WCK Camera Boundary Detection Example + Code

Postby MrMushroom » Sun May 27, 2012 9:01 am

Hi, burtonposey!
Can you reupload please this file http://www.addogames.com/downloads/wckh ... ryDemo.zip ?
Thanks in advance!

burtonposey
Posts: 93
Joined: Tue Nov 09, 2010 1:26 am

Re: WCK Camera Boundary Detection Example + Code

Postby burtonposey » Sun May 27, 2012 10:23 am

MrMushroom wrote:Hi, burtonposey!
Can you reupload please this file http://www.addogames.com/downloads/wckh ... ryDemo.zip ?
Thanks in advance!


Here ya go!
http://files.addogames.com/downloads/wckhelp/WCK_BoundaryDemo.zip

MrMushroom
Posts: 4
Joined: Mon Apr 16, 2012 3:38 pm

Re: WCK Camera Boundary Detection Example + Code

Postby MrMushroom » Sun May 27, 2012 10:38 am

It's cool, thanks, burtonposey!

burtonposey
Posts: 93
Joined: Tue Nov 09, 2010 1:26 am

Re: WCK Camera Boundary Detection Example + Code

Postby burtonposey » Tue Apr 21, 2015 6:21 am

I am discontinuing the addogame domain that I've previously linked. Please download the files from this url moving forwards (I'll update the previous link if I can as well).

http://files.burtonposey.com/downloads/ ... ryDemo.zip

if anyone has questions about this stuff, I did it 4.5 years ago, so I'm not going to be able to help, but hopefully the files do!

Take care,
Burton


Return to “WCK”



Who is online

Users browsing this forum: No registered users and 2 guests