Pin Me

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

written by: Matthew Casperson•edited by: Michele McDonough•updated: 9/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.

  • slide 1 of 4

    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.


    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]

  • slide 2 of 4
  • slide 3 of 4

    The call to addNewBaseObjects and removeOldBaseObjects is done for a very specific reason. The EngineManager maintains a list of any class that extends the BaseObject class (which we will look at later) in the baseObjects property. The BaseObject class itself is responsible for adding and removing itself from this collection when it is created or destroyed. However, you can not modify a list (or at least it is very bad practice to do so) while you are looping over it. This has an implication for us, because a new BaseObject could well be created during a call to another BaseObjects enterFrame function, which in turn is called inside a loop that is iterating over the baseObjects collection. If a new BaseObject is created at this point, it can not go directly into the baseObjects collection, because this would modify the collection while it is being looped over. The same principal applies to BaseObjects that are removed from the system.

    To overcome this two collections, newBaseObjects and removedBaseObjects, are used to hold any BaseObjects that are created or destroyed. Then, when we know we are not looping over the main baseObjects collection, the addNewBaseObjects and removeOldBaseObjects function can sync up any changes that were made. [code]

    The static main function is the last function, and this serves as the entry point for the application. [code]


    The BaseObject class is the base for every object that will participate in the render loop. It adds itself to the collection maintained by the Enginemanager when it is created, removes itself from that collection when it is shutdown, and defines the enterFrame function that extending classes can override to update themselves.


    The MeshObject class extends the BaseObject class, and adds the ability to add and remove a Shape3D (the base class for Sandy-HX 3D models) to the scene via the root group that we defined in the EngineManager.


    The TestBox class extends the MeshObject class, and is a simple example of how to use the MeshObject class. All it does is create a cube mesh which is textured with a ColorMaterial, and then passed to the MeshObject constructor so it can be added to the scene.


    The ApplicationManager holds the code that defines how the current application is run. In this case all we are doing is creating a new instance of the TestBox class.

    This was a fairly simple example of how to use the Sandy-HX engine, but it provides a nice platform to build on as we explore some of the more advanced features.

    Check out the online demo here and download the source code here.

    Read more in the Flash and JavaScript 3D with Sandy-HX series

  • slide 4 of 4

    Related Article

    papervision3d logo Papervision 3D Programming Tutorial - Loading and Displaying a 3D Model

    This free tutorial will show you how to create a Flash program that will load and display a 3D model in a web page using Papervision 3D and Flex.