Flash and JavaScript 3D with Sandy-HX - Getting Started

Article by Matthew Casperson (4,911 pts )
Edited & published by Lucinda Watrous (19,577 pts ) on Sep 29, 2009

In this article we build a framework for future Sandy-HX applications, and create both a Flash and JavaScript 3D demo using the one code base.

Now that we have seen how to create a basic Sandy-HX application, lets look at making a framework that we can build future applications from. For those that have read my series “Flash Game Development with Flex and Actionscript” or “Game Development with Javascript and the canvas element” will see that this code here is quite similar.

It all starts with a class called EngineManager. This class will be responsible for initialising the Sandy-HX 3D engine and distributing events to other objects.

EngineManager.hx

The EngineManager class extends the Sprite class. While the Sprite class is usually associated with the Flash library, the neash Haxe library provide a cross platform alternative which lets us write one application that can target Flash and JavaScript. The details on where to get the neash library, and how to set it up, are in the last article.

The constructor (or the new function) is where the Sandy-HX engine is initialised. First we create new lists, and assign them to the newBaseObjects, removedBaseObjects and baseObjects properties. These properties will be explained later. [code]

We create a camera, set it 10 units down the z axis, and point it back at the origin. [code]

The viewport is then created, and is set to take up 400 x 300 pixels on the screen. [code]

We create a group to serve as the root collection of our 3D scene. [code]

Finally the scene itself is created, and is supplied with the root group we created above, and the camera. [code]

At this point the Sandy-HX engine is pretty much ready to go. Apart from initialising the Sandy-HX engine, the EngineManager also contains the render loop. The render loop is just a function that gets called repeatedly every frame. Other objects (like a car or a spaceship) are notified just before each frame gets drawn to the screen, which gives them a chance to update themselves. In order to update themselves in a predictable and uniform way, they need to know how much time has passed since the last frame. The time that the last frame was drawn is kept in the lastFrame property, which is initialised here to the systems current time. [code]

Next the application manager is created and its startupApplicationManager function called. The ApplicationManager will contain all of the code specific to an application (which will change a lot between different demos), as opposed to the code that is specific to the Sandy-HX engine (which isn’t going to change much at all). [code]

The enterFrameHandler function is set to be called when a frame is about to be drawn. [code]

The EngineManager is then added to the stage, ready to receive frame updates. [code]

The enterFrameHandler function is now set to be called once per frame. First the time since the last frame is calculated. [code]

The main collection of BaseObjects is synced up to reflect any that have been added or removed in the last frame. [code]

All the current BaseObjects having their enterFrame function called, which gives them a chance to update themselves before the frame is rendered. [code]

Finally the scene is rendered. [code]

Showing page 1 of 2
Subscribe to Web Development
RSS
Get free weekly updates, directly to your inbox.
Subscribe
Browse Web Development