Archive for the ‘ActionScript’ Category

ActionScript, PushButton Engine Angry Explanations #2: Spinning a freaking image with PBE!

2 Comments

Following on from Angry Explanations #1, we will now add some motion to the scene. For kicks and giggles, we’ll cause the image to rotate each frame.

(Note that this information is in reference to PushButton Engine build r625.)

The key takeaway here is that for a component to be tickable, it must implement the ITickedObject interface and then tell the ProcessManager to start and stop calling onTick() every tick.

Oh, there’s one other key takeaway here: how to use PropertyReferences. You get a property of a component by way of the owning entity. You create a PropertyReference instance for each data member that you need to access. In this example, we’re accessing the rotation field on the SpriteRenderer component we added in Angry Explanations #1.

In a bit more detail, the PropertyReference is constructed with a special string: "@Sprite.rotation" (see line 11 in the code below). That means, this is a reference to the component of this entity with the name “Sprite” (recall that we gave it that name when we created the SpriteRenderer component instance), and the field “rotation” of the SpriteRenderer class. It’s quite simple once you realize what it’s doing (but I’m no less angry, mind you!).

I thought that a SpatialComponent might be necessary to alter the sprite’s position, but apparently that component has been removed (since r470, which is the current packaged release). That data seems to now be handled by the renderer component itself.

Add this one line to the end of showLogo() from the previous example:

spriteEntity.addComponent( new SpinController(), "spinner" );

Then add the following new class in a sub-folder (components/controllers/).

package com.yourcompany.yourgame.components.controllers
{
	import com.pblabs.engine.core.ITickedObject;
	import com.pblabs.engine.core.ProcessManager;
	import com.pblabs.engine.entity.EntityComponent;
	import com.pblabs.engine.entity.PropertyReference;

	public class SpinController extends EntityComponent implements ITickedObject
	{
		// Cache the PropertyReference instance here to avoid a bunch of temporary allocations.
		private var _rotProp:PropertyReference = new PropertyReference( "@Sprite.rotation" );

		// Nothing to do in the constructor because this is such a simple example.
		public function SpinController()
		{
			super();
		}

		// When the component is added to the sprite entity, we want to register to
		// get tick updates by the ProcessManager.
		protected override function onAdd():void
		{
			super.onAdd();

			ProcessManager.instance.addTickedObject( this );
		}

		// When the component is removed from the sprite entity, we want to unregister
		// from the ProcessManager so tick updates will stop.
		protected override function onRemove():void
		{
			super.onRemove();

			ProcessManager.instance.removeTickedObject( this );
		}

		// Each tick, we just change the rotation of the sprite renderer a little bit.
		public function onTick(tickRate:Number):void
		{
			// Get the current rotation.
			var rotation:Number = owner.getProperty( _rotProp ) as Number;

			// Add 1 degree to it.
			rotation += 1;

			// Store the new rotation back in the sprite.
			owner.setProperty( _rotProp, rotation );
		}
	}
}

As an addendum, I should point out that the rotation will probably not be smooth. To fix that, you should have the SpinController implement IAnimatedObject instead of ITickedObject. The registration with the ProcessManager is the same, except you call addAnimatedObject() instead of addTickedObject().

The difference is that IAnimatedObject will update when Flash draws a frame instead of when the ProcessManager ticks, and the motion will appear a lot smoother.

And you’ll want to normalize the rotation based on delta time since the last frame. Er, like this:

public function onFrame( elapsed:Number ):void
{
	var rotation:Number = owner.getProperty( _rotProp ) as Number;

	// Rotate 15 degrees per second, nice and slow.
	rotation += 15 * elapsed;

	owner.setProperty( _rotProp, rotation );
}

ActionScript, Flex, PushButton Engine Angry Explanations #1: How to draw a freaking image with PBE!

5 Comments

(Thanks to Ben G. for that humorous title! :D And just to be super clear–I’m not angry at all about PBE. The anger is entirely tongue-in-cheek.)

So, yeah, I got started with PBE at a bad time, I think.

It’s in transition between some major changes, and so all the docs and tutorials to this point are out of sync and kind of very… confusing. Because of that, I really struggled to figure this out, and in fact couldn’t get an image on the screen without professional help (I’ll let you interpret that however you’d like).

This information is relevant for PBE r625 and up.

(This isn’t to say the engine is poorly designed–it’s simply not accurately documented in places because it has been changing so quickly. And to be fair, it’s still in beta. I wouldn’t use the engine if I didn’t think it was great.)

A frustrated noob’s guide to getting a freakin’ image on the dang screen using Flex 3

Here’s the MXML which will reference the code.

<?xml version="1.0" encoding="utf-8"?>
<game:Game
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:game="com.yourcompany.yourgame.*"
	width="750"
	height="600"
	layout="absolute">

</game:Game>

Now define a resource in a ResourceBundle subclass, which is the image you want to display, and let PBE automagically make it accessible through the resource manager.

package com.yourcompany.yourgame
{
	import com.pblabs.engine.resource.ResourceBundle;

	public class EmbeddedResources extends ResourceBundle
	{
		// The path is magically also the name of the resource.
		[Embed(source="../assets/images/logo.png", mimeType="application/octet-stream")]
		public var logoImage:Class;
	}
}

Put that image into action! It’s a simple notion, but somewhat complicated if you’re new to the engine and its gooey innards.

package com.yourcompany.yourgame
{
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.entity.IEntity;
	import com.pblabs.engine.resource.ImageResource;
	import com.pblabs.engine.resource.ResourceManager;
	import com.pblabs.rendering2D.DisplayObjectScene;
	import com.pblabs.rendering2D.SpriteRenderer;
	import com.pblabs.rendering2D.ui.FlexSceneView;

	import mx.containers.Canvas;
	import mx.core.Application;
	import mx.events.FlexEvent;

	public class Game extends Application
	{
		public var resources:EmbeddedResources;

		// We need access to this in a couple of functions.
		private var _scene:DisplayObjectScene;

		public function Game()
		{
			super();

			// Let the Flex Application initialize fully before we muck with it.
			addEventListener( FlexEvent.APPLICATION_COMPLETE, onStartup );
		}

		// This is called once the Flex app (stage, in particular) is initialized.
		private function onStartup( e:FlexEvent ) : void
		{
			// Load our embedded resources (the image to show).
			resources = new EmbeddedResources();

			// Tell PBE to initialize and pass it our instance so it can get the stage.
			// (Remember, Application is a subclass of Sprite, which PBE needs.)
			PBE.startup( this );

			createPbeScene();

			showLogo();
		}

		private function createPbeScene():void
		{
			// Create a new IEntity for the scene view.
			var sceneEntity:IEntity = PBE.allocateEntity();
			sceneEntity.initialize( "sceneEntity" );

			_scene = new DisplayObjectScene();

			// Since this is Flex, we need the appropriate scene view class.
			var sceneView:FlexSceneView = new FlexSceneView();

			// Set up the view size.
			sceneView.width = 750;
			sceneView.height = 600;

			// FREAKIN' IMPORTANT: add the view as a child to our display list!
			this.addChild( sceneView );

			// Connect the view to the display object scene (a component).
			_scene.sceneView = sceneView;

			// Add the display object scene to the scene entity.
			sceneEntity.addComponent( _scene, "renderer" );
		}

		private function showLogo():void
		{
			// Create a new IEntity instance for the sprite to be displayed.
			var spriteEntity:IEntity = PBE.allocateEntity();
			spriteEntity.initialize( "logoEntity" );

			// Add a sprite rendering component.
			var sprite:SpriteRenderer = new SpriteRenderer();

			// Tell the renderer to draw (and load) this image resource.
			sprite.fileName = "../assets/images/logo.png";

			// Tell the renderer to draw to the display object scene.
			sprite.scene = _scene;

			// Add the component to the sprite entity.
			spriteEntity.addComponent( sprite, "sprite" );
		}
	}
}

So, what the heck just happened? Pfft! Don’t ask me! I’m still a freakin’ noob! :)

I know a couple of things, though. The SceneView is like a “canvas” where all DisplayObjectRenderers are drawn. So you create entities and fill them with components (like a SpriteRenderer) and tell the renderer component about the scene view. Magically, the sprite appears! It’s not too much to understand if you just want to know the API and how to use it.

To really understand it, you’ll need to look under the hood and figure out the connections. A good bit of hidden work is being done to simplify the API, but possibly at the expense of understanding. It’s neither good nor bad. It’s just The Way of PBE (for now).

Feel free to post here to help fill my gaps in comprehension. I haven’t used the engine enough to write a thorough explanation, and I’m not too proud to accept help. :)

ActionScript, Monetization, Virtual Goods Virtual item sales in Flash: a managed payment service roundup

0 Comments

The microtransaction bug seems to be going viral these days among the Flash community. There are a growing number of companies offering managed payment services to Flash developers: they handle the dirty backside, and you give them content and share the income.

I personally think that it is worth it to build your own system (and I’m usually the guy saying, “Use the middleware, fool!”). But I think it depends on the scale of what you are planning. In my case, I want total control, and I want to own access to my customers so that I can continue to communicate with them. I also don’t want my games to become advertisements for a payment service.

I don’t view virtual item sales as just a sales channel. It’s also a gesture that means a player cares about and is emotionally invested in the game, and I want to maximize that relationship to make my players happy, long-term customers. Without access to my customers, the payment service is crippling my business. I don’t know that all these systems insulate the developer from his/her customers, but that is a major issue to bear in mind.

These Flash-specific services could be really useful to someone who is making much smaller scale games and wants some add-on sales or someone experimenting with virtual goods in an effort to diminish reliance on ad revenue. I’m not reviewing any of the services, just announcing that they exist. I haven’t investigated them all very deeply, but I will be poking around.

75% – andrograde.com
70% – www.nonoba.com
60% – www.gamersafe.com
60% – www.mochimedia.com
50% – www.heyzap.com

Which is best? It depends on your goals and plans. If you’re just making little quickie games (90% of Flash games), then any of the above would work. If you have a more broadly scoped business plan, you might want to steer clear and look into services that are not Flash-specific and spend the time/money to do the integration yourself.

ActionScript, Java When instanceof doesn’t recognize an instanceof.

2 Comments

Java’s ‘instanceof’ keyword is not the same as ActionScript’s ‘is’ keyword. In theory, they do the same thing: find out if an instance of an object implements a class or interface. In reality, they’re quite different.

Java compares for an exact match. ActionScript compares for a match or any subclass of the class being compared.

Let’s say we have class A which implements interface I. And we have class B which is a subclass of A (and implicitly implements interface I).

Java:

if( A instanceof I ) // True
    print( "yeah" );

if( B instanceof A ) // True
    print( "yeah" );

if( B instanceof I ) // False!
    print( "yeah" );

ActionScript:

if( A is I ) // True
    print( "yeah" );

if( B is A ) // True
    print( "yeah" );

if( B is I ) // True!
    print( "yeah" );

So, having learned a lot of ActionScript before diving into Java, I expected ‘instanceof’ to behave just like ‘is’. But no. And that was annoying not to realize at first. So, you’ve been warned!!

Update: Hmm, now I wonder if overloading method parameters behaves the same way as instanceof in Java? I’m going to be safe and make an interface for any classes that have multiple subclasses (ie, categories of entities which require special behaviors). It’s still polymorphic, so I guess it’s “good design.” I haven’t had quite enough experience digging into the reasons for Java’s language design choices.

Update 2: Of course I had to test the behavior of overloaded methods. Turns out that Java isn’t as exacting with overloaded methods–which is a relief!

For example, I have an Entity class, and a subclass called ItemEntity. I need to do some special handling on an ItemEntity (or any subclass of it) in a method that takes Entity as a parameter. Overloading that method to take an ItemEntity gives me the desired behavior for ItemEntity or any subclass of ItemEntity. Yay!

ActionScript, Java, Project Darkstar When ActionScript talks to Java using bytes

0 Comments

I’ve just finished building my client/server communication loop for Spirits of Gaia. The client is Flash (Flex), and the server is Java (built on Project Darkstar).

Darkstar uses a binary message format, which is a different approach from something like SmartFox, which uses strings (“raw”, XML, or JSON). I had experience with SmartFox, but I hadn’t tried to implement a binary format in Flash before. It really wasn’t bad in the end, and most of my time was spent just learning about ByteBuffers and ByteArrays in ridiculous amounts of detail.

And–of course–one of my bugs probably induced more research than necessary as I attributed malfunctions to various other possible causes. The bug was that I inherited one of the command processing classes from a base class which didn’t implement what I thought it did, so it was silently failing. :roll: But I learned a lot. A whole fricken lot! And that’s enough learning for anybody.

So one issue is that you can’t be sure what the endian-ness is for the server or the client. Well, maybe you can, but before now I didn’t know enough about it to make any assumptions. Darkstar uses ByteBuffers to hold incoming messages, and the default for Java is big endian for ByteBuffer. Thus, I use big endian on the server.

I had a feeling that Flash would take care of it for me, but of course I wanted to make sure it was using big endian, too. For a while, though, I didn’t know how to make a ByteArray use big endian or little endian.

hexadecimal My first approach was to get around it entirely by encoding all values that require more than 1 byte into hex strings. What a joyful aside that was! (Sarcasm, you see.) I mean, now I know how to encode anything to hex and back and do it sideways, too. But, this wasn’t working so well and it was bloating the nice binary format anyway. (No, I wasn’t really concerned about the size of the packets based on that, but if there’s a better way and it’s more space efficient–why not?)

Then I dug a bit deeper and realized that you can tell a ByteArray to use big endian like this:

var buffer:ByteArray = new ByteArray();
buffer.endian = Endian.BIG_ENDIAN;

Hard, huh? :) So then I didn’t need to encode multi-byte values into fun hex strings anymore (with one exception). So my PacketBuffer class got a bit more efficient in speed and size, and all is well now.

The one exception is for Java long values, which are 8 bytes. Flash (as far as I know) has no way to pull an 8-byte value from a ByteArray. And, no, I don’t want to do it by hand–which doesn’t mean I won’t! If encoding to hex string doesn’t work out, then I’ll write some code to stitch 8 bytes into a long value and stuff that into a Number (since it won’t fit into a 4-byte int). But, honestly, that kind of stuff is not my cup of tea because it’s not fun to me. But if it’s gotta be done, I’m a professional, so I’ll buckle down and do it. Clearly, I want to whine about it a lot just in case I do really need to do it.

For completeness, you tell a Java ByteBuffer to use big endian like this:

final ByteBuffer buffer = ByteBuffer.allocate( someSize );
buffer.order( ByteOrder.BIG_ENDIAN );

I think it’s ok to assume that Java (and Darkstar) will still default to big endian on whatever OS my future game server will be running (a flavor of Linux, no doubt). If I run into some bizarre bug where command ids are getting scrambled, I’ll know the first place to look.

ActionScript, Java, Projects Better than SmartFox? Researching Project Darkstar Server.

4 Comments

I haven’t reached any conclusions yet, but I am really excited about Project Darkstar Server.

Project Darkstar is software infrastructure that aims to simplify the development and operation of massively scalable online games, virtual worlds, and social networking applications. Originally created by Sun Microsystems, it is today advanced as an open source project through the Project Darkstar Community.

I knew about it a few years ago, but it didn’t seem complete enough to bother with. But then I saw that CampFu had launched using it on their games backend, and that pushed me over the fence into wanting to investigate because it has to be pretty robust and usable to support a commercial product like that.

campfu I like SmartFox Server just fine. I think for my needs (indie games on small to medium scale), it would work really well. But two big motivations for looking at Darkstar are that 1) Darkstar seems like it provides more MMO functionality from the start, and 2) Darkstar is free and open source.

I had written a hefty chunk of server code for SmartFox already, and had plans for more. That’s really the product’s weakness for doing something with a persistent world type experience. SmartFox is very bare bones, but that’s not a bad thing if you go in knowing it’s not MMO-in-a-box. Well, I don’t think Darkstar is, either, but it appears to have more than SmartFox that is specifically for virtual worlds. So that is what really excites me about it: maybe I can get to building game logic sooner!

I’ve only done a day of reading about it, and I’ve downloaded and browsed through the 0.9.9 distribution. So far it looks really cool, and I like that the developers want to make it seem like a single-threaded program, because I’m not looking forward to debugging thread race conditions and all that crap. Another big plus for Darkstar, in my book.

If things pan out, I am going to be releasing a multiplayer Flash game. Some folks were balking at the idea of using Unity for Lila Dreams, but I still think that’s the way I’m going for that project. But it doesn’t mean I’m done with Flash, because I have a closet full of game concepts that I’d love to be able to create eventually. PushButton Engine is still very much on my radar. And, as I’ve said elsewhere, I choose the technology based on the needs and goals of a project and its parameters. I’m not a fanboi of any particular technology, platform, programming language, etc. I just use what makes the most sense on a case by case basis.

Maybe Darkstar will become my server technology of choice. I need more time to dig deeper and find out what it’s really like to use it on something that is non-trivial. Does it really provide a lot of virtual world infrastructure as compared to SmartFox? Is it viable for indies? I guess you can find the answers when I post again on this topic in the near future! :)

ActionScript Free, managed Flash multiplayer APIs

3 Comments

There are some interesting things brewing for Flash multiplayer (and monetization, but that’s another post).

flash-multiplayer-api I’ve noticed the rise of several hosted solutions that intend to make the creation of multiplayer Flash games simpler. I’m all about using middleware. I have no ego or hangups about parts of my game code being “not invented here.” I just want to solve the problems robustly and with as little effort as necessary so I can focus on the real meaningful parts, like gameplay.

Here are services I know of. These all host your game, manage the servers, and offer other services around that theme.

Nonoba

Nonoba provides a multiplayer API, and while they seem to have some nice features, I was less than impressed with their lack of responsiveness in the developer forums. With this kind of thing, customer service is at the top of the list for reasons I will go with one provider over another. I don’t want to hit a snag and be left hanging. Some might be turned off by the fact that your server code will need to be C# (but client is Flash).

iminlikewithyou (now called omgpop)

UPDATE: I’m not sure they offer an API anymore. If they do, they’re hiding it really well. I couldn’t find it on their site.
iminlikewithyou has a similar offering, where they host the servers and give you a simple API. It doesn’t seem like a bad service, but I’m not sure how tightly a game using their API would need to be integrated with their website (it’s also a social gaming site).

Whirled

Whirled has a multiplayer API, although the games must be tightly integrated with the site. I find this strangely appealing, maybe because I like Whirled and the idea of building a game specifically to fit into it seems like a unique kind of challenge and opportunity to make something different. I’m also a big fan of that rascal, Daniel James, so there’s a lot of trust inherent in working with the platform. And, shoot, they give away a pile of money every few months to the best new games.

come2play

Come2Play offers a beta API and server hosting, too. The Api is currently limited to 2 players, but apparently they plan to support unlimited players later. They also may put ads in your preloader, although you will get 50% of that revenue. Their angle seems to be making it easy to put your games on social websites like Facebook or MySpace.

Neutron/Photon

Exit Games’ Neutron and Photon are a pair of APIs/services which provide high level features like lobby, chat, and even billing infrastructure as well as UDP/TCP networking (obviously Flash won’t be using UDP but Unity could) and full hosting for games. This seems like a very promising service, and it’s got a pretty impressive client list.

I like this trend! It tends to force you to be reliant on the service provider, but it also sweeps a lot of barriers out of your way. For small games, this could be a real boon.

But the obvious downside is the vendor lock-in, and also Nonoba and iminlikewithyou force your games to display their chat sidebar/lobby. I really don’t like that, but, again, considering what you get and the price (free!), this isn’t a bad deal for certain types of games.

I would not launch anything too ambitious on these services, but I might actually give them a spin for experimentation’s sake. They could be great testbeds for learning lessons to apply to larger projects, things like community management, marketing, development cycles (launch and inevitable updates), etc.

So what similar services do you know of that I have missed? Leave a comment, and let me know!

AIR, ActionScript, Projects Goblin game editor pre-alpha: second screenshot

2 Comments

I’m probably boring the world here, but I figured I’d follow up on the last post to show some progress on my editor. It’s still really ugly, and this isn’t anything more than a throwaway map scribble, but at least I can say that it’s running and I have conquered the Flex issues I ran into. So there. :)

(The magenta is transparent in the game engine.)

The editor also has undo. It’s hard to live without, so I implemented it now instead of later. It also saves maps as XML, which I will usually embed into the SWF, but doesn’t have to be there. The asset manager can handle either case, which makes life easier for test phases when you are changing the maps a lot.

I hope to get some “real” test maps put together and get right to testing things by this weekend. All depends on other demands on my time, of course.

AIR, ActionScript, Flex, Projects Goblin game editor pre-alpha: first screeny

0 Comments

How about a little self indulgence? :) After the amount of hair I lost wrangling with Flex, I deserve it!

I admit it: this is butt ugly. It’s just plain old Flex. I didn’t add any styling at all. Who has time for that?! And the screenshot is tiny (better ones will be bigger, promise).

Anyway, what you see is the new map dialog, where you enter some parameters for your new map. To the right you see the edit bar, a tile set, etc. This is laid out like the Lila Dreams editor, but the code is only slightly based on stuff I did previously (handling user prefs, finding asset directory, etc). It won’t actually make a new map yet, but I just need to hook that up to the UI.

Let me summarize: five hours of trying to figure out why Flex didn’t like my custom components and associated .as files. Finally I just decided to inline all the code, to hell with keeping it separate. I have always thought Flex is very tedious to use. It’s a love/hate relationship. Maybe in seventeen thousand years, after I have used it a little bit, I will feel more on the love side. Today… not so much.

On the positive side, it is coming together pretty fast despite these kinds of frustrations. There’s a chance I can achieve my goal! More updates to come.

Addendum:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=7142

*Screams*

Well, at least now I know that you can’t subclass Canvas and expect it to behave like when you subclass UIComponent if you are trying to add a child Sprite to it. What I mean is, if you create a custom component that subclasses Canvas, it will throw an exception when you try to addChild() a Sprite. But if you subclass UIComponent, it will let you addChild() a Sprite.

*Slaps self silly, then gets back to work*

ActionScript Game loop updating – and physics.

6 Comments

I’ve been on an epic quest to figure out how to best structure my game loop. The game loop is the one place where all your game’s logic should be updated. It’s the control center.

I’ve used delta time before, and that works fine in many cases. It’s where you measure the time since last game tick (aka frame) and tell all your objects how much time has passed so they can scale their responses accordingly. This is simple, and it works for very simple physics models. The trouble starts when you’re using a complex physics simulation to control objects.

bionic-man I’m using Box2d, and for a physics sim, you want every update to use the same delta time. Fluctuations can cause the simulation to get all wigged out and blow up. Lucky for me, on the game I’m working on (not announced yet), I’m mostly only using Box2d for collision detection. There are no stacks of boxes or whatever, so there’s not a lot of simulating happening, and that makes it more tolerant to variable tick durations. Still not ideal, because it can cause weird collision glitches, like tunneling.

My view camera, though, tends to be very sensitive to update time fluctuations, and if the player moves more one frame than in the last, he jitters. It’s very annoying, and makes the whole game look jerky and twitchy, even at respectable framerates.

So my quest has been to find a game loop that can smooth all this out.

One thing I did was enforce a constant framerate. This allows the rendering to happen at a steady rate (like 30 fps) by sleeping for a few milliseconds if it’s rendering faster than your desired framerate. You basically measure if the last frame took more or less time than what you want, add (sleep your timer) or subtract (don’t sleep) that time from the current frame, and that evens them out.

So I had the physics decoupled from the rendering, but even with the steady framerate, the physics was updating at varying speeds to keep a steady 60 updates per second. So, for each frame (at 30 fps) the physics would typically update twice. But sometimes the interval since the last update would be more than that, so it would update 3 times, or maybe only once. Again, this causes jittery movement and makes the game feel really terrible.

So I’ve decided to just frame lock the physics and rendering. That means when there’s a frame rendered, there’s a corresponding physics update. As long as you have the CPU to stay at or above the minimum frames per second, the game will look nice and smooth.

This is great. Mostly. The problem happens when the computer can’t keep up with your desired framerate. Since things are on a fixed time step, the whole game slows down. Slow motion is only fun if you mean for it to happen! But I haven’t found a better solution, and I’m on a tight deadline. This’ll have to do for now.

Some linky goodness:
http://www.8bitrocket.com/newsdisplay.aspx?newspage=10248
http://gafferongames.wordpress.com/game-physics/fix-your-timestep/