jellysmash_tuto01

Jelly Smash part 1 : Game Tutorial for Flash-Stage3D & ND2Dx

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

The source code

Before starting anything, I propose that you download the complete source code and project files of this tutorial so I can explain everything here in more details.

box_zipJellySmash Game Tutorial part.1 For Flash Stage3D and ND2Dx

It contains the complete source code as well as the project files (FlashDevelop, Flash CS5.5 and TexturePacker) and the psd files for the arts.

The Main class

First we need a Main class from where everything starts. Let’s take the Main.as class :

public var world2D:World2D;
public var gameScene:GameScene;

public function Main() 
{
	addEventListener(Event.ADDED_TO_STAGE, onAddedToStageHandler);
}

private function onAddedToStageHandler(e:Event):void 
{
	removeEventListener(Event.ADDED_TO_STAGE, onAddedToStageHandler);

	// init our assets
	Assets.init();

	// this is our main and primary object for ND2Dx, it automatically configures itself to take the size and framerate of our document
	// you only need to create one
	world2D = new World2D();

	// we need to add it to the stage in order for it to setup itself
	addChild(world2D);

	// a scene is necessary to start rendering anything it is a more convenient way of managing different parts of our game (main menu, secondary menus, game, other screens...)
	// as you can switch between them easily
	gameScene = new GameScene();

	// set our scene as the active one
	world2D.setActiveScene(gameScene);

	// and start the rendering process
	world2D.start();
}

As you can see, the code is pretty much commented, but here are the details of every object :

  • World2D: is like the control center of ND2Dx. It will create a Context3D and setup everything needed so you can start using the Stage3D API. It needs to be added to the original Flash display list in order to start initializing itself as it needs the Stage object.
  • GameScene: is an object that extends Scene2D. A scene in ND2Dx separates the different parts of our game in a more practical and logical way. For example, we need a scene for our main menu, another scene for our game (our current GameScene in fact), another one for the game setup, etc…
    Only one scene can be active at a time. It is set via the function setActiveScene() in our World2D object.
  • Assets: is a custom class created for the needs of this tutorial with static properties and functions that gather all the assets we will need (textures, sounds, etc…)

In resume, here is what we are currently doing in Main.as:

  1. wait for our class (which extends Sprite) to be added on the Flash Stage (so we have access to the stage object)
  2. initialize our assets (at this stage, only textures)
  3. create a World2D object and add it to the stage so it can start initializing itself
  4. create a GameScene object (extends Scene2D) to hold our game logic as well as our game objects
  5. set our GameScene as the active scene
  6. start the rendering of the scene

This is basically all you need to do to start a Stage3D game with ND2Dx.

Assets and how to load a texture ?

Our Assets class holds all the textures will we need, or in fact, it holds only one texture (at the moment), also called atlas.

An atlas containing our character toby, some grass texture, a bubble and some white smoke.

An atlas containing our character toby, some grass texture, a bubble and some white smoke.

An atlas is a big texture that contains several others smaller textures. The main benefit from using an atlas instead of separated textures is to reduce the number of state changes throughout the rendering process.
You see, a graphic card processes things in a highly parallelizable way, meaning that it can process lots of different things at the same time. but in order to do so, we need to keep state changes to a bare minimum as it breaks the rendering process. And that is very bad for performances. Setting a texture is a state change. Same for setting a shader, a vertex buffer, a blend mode, etc…

If we had different textures for every single thing we want to show on screen (toby, some grass, a bubble, some particle effects, …) we would have at least a state change for every one of them. Using an atlas helps solving this problem as we won’t need to change the state for every object that use the same atlas. I said “helps” as it is not the only thing that needs to be taken into account for this particular and yet very important problem. But we will discover more on that subject later on. And for those who want to know more about the impact a state change has on performance, I recommend reading this from JacksonDunstan.com.

An atlas also comes with a second file, an xml or json encoded file that contains all the information for each piece of texture the atlas contains (where it is, what size, etc…).

So how do we load a texture ?

the simplest way is to create one from an existing BitmapData :

TextureUtil.textureFromBitmapData(your_bitmap_data);

TextureUtil is a helper class that contains different functions to create and modify textures. In this case, the textureFromBitmapData() function takes a BitmapData object and returns a Texture2D object.

A Texture2D is the only object in ND2Dx that represents a texture. Nothing else is needed.
The new thing about this object is that it can now contain sub-textures. That means that a Texture2D can also act as an atlas.

And how do we create an atlas then ?

well, again, with our TextureUtil helper class :)

TextureUtil.atlasTexture2DFromParser(texture2D, new AtlasParserSparrow(xml_data));

This function needs a Texture2D object as well as a Parser. There are different kinds of atlases out there, packed differently. So different parsers are needed. Depending on the parser, it takes either an xml or a json encoded string. In our case, I chose to use the Sparrow/Starling data format and thus use the AtlasParserSparrow that takes an xml as an argument.

That’s it. We now have an atlas with only two lines of code.
Each sub-texture of a Texture2D IS a Texture2D. That means that any of them can be used directly as a texture. That’s the beauty of it :) no need for other kind of objects holding our atlas data. Everything is contained in one single place.

Now that we know how textures work, let’s get going with our game and start creating our main character: Toby.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Pages: 1 2 3 4

Leave a Comment