Hello, Alternativa3D

In this tutorial we will create sumple 3d-scene to understand scene building basics in Alternativa3D, step by step.

So, let's create new ActionScript Project in Flex Builder (or in other software you're using), and name it, say, HelloAlternativa3D. Then connect all SWC-libraries from Alternativa3D package.

Our project will have only one file with following code inside:

HelloAlternativa3D.as
package {
	import alternativa.engine3d.controllers.CameraController;
	import alternativa.engine3d.core.Camera3D;
	import alternativa.engine3d.core.Object3D;
	import alternativa.engine3d.core.Scene3D;
	import alternativa.engine3d.display.View;
	import alternativa.engine3d.materials.WireMaterial;
	import alternativa.engine3d.primitives.Box;
	import alternativa.utils.FPS;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;

	[SWF(backgroundColor="#000000", frameRate="100")]

	public class HelloAlternativa3D extends Sprite	{
		
		private var scene:Scene3D;
		private var view:View;
		private var camera:Camera3D;
		private var cameraController:CameraController;
		private var box:Box;
		
		public function HelloAlternativa3D()	{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		public function init(e:Event): void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// Creating scene
			scene = new Scene3D();
			scene.root = new Object3D();
			box = new Box(100, 100, 100, 3, 3, 3);
			box.cloneMaterialToAllSurfaces(new WireMaterial(1, 0xFFFFFF));
			scene.root.addChild(box);
			
			// Adding camera and view
			camera = new Camera3D();
			camera.x = 100;
			camera.y = -150;
			camera.z = 100;
			scene.root.addChild(camera);
			
			view = new View();
			addChild(view);
			view.camera = camera;

			// Connecting camera controller
			cameraController = new CameraController(stage);
			cameraController.camera = camera;
			cameraController.setDefaultBindings();
			cameraController.checkCollisions = true;
			cameraController.collisionRadius = 20;
			cameraController.lookAt(box.coords);
			cameraController.controlsEnabled = true;

			// FPS display launch
			FPS.init(stage);

			stage.addEventListener(Event.RESIZE, onResize);
			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
			onResize(null);
		}
		
		private function onResize(e:Event):void {
			view.width = stage.stageWidth;
			view.height = stage.stageHeight;
		}
		
		private function onEnterFrame(e:Event):void {
			// User input processing
			cameraController.processInput();
			// Scene calculating
			scene.calculate();
		}
	}
}

We'll look through the code later, now just try to copy it to your project, compile and run it.

You'll see this (it is a link to SWF here):

You can control camera using "arrows" and WASD, Space and Shift. Mousewheel controls camera field of view (FOV).

Creating scene

Let's review code line by line. At first we create scene and put cube primitive to it:

// Create scene object. Scene is a container which have everything else inside.
scene = new Scene3D();
// Set root object for scene hierarchy. Root object coordinate system becomes scene global coordinate system.
scene.root = new Object3D();
// Create cube primitive
box = new Box(100, 100, 100, 3, 3, 3);
// Set material which draws primitive edges
box.cloneMaterialToAllSurfaces(new WireMaterial(1, 0xFFFFFF));
// Add primitive to a scene
scene.root.addChild(box);
Adding camera

Scene is ready, so we want to see result. We have to put camera on the scene and connect it to view:

// Create camera instance and set it's coordinates
camera = new Camera3D();
camera.x = 100;
camera.y = -150;
camera.z = 100;
// Add camera to the scene
scene.root.addChild(camera);
// Create a view and connect it to the camera
view = new View();
addChild(view);
view.camera = camera;
Camera revival

Let's use controller from library. It implements basic movement and rotation camera controls, with basic collision detection:

// Create controller and connect camera
cameraController = new CameraController(stage);
cameraController.camera = camera;
// Set default control keys
cameraController.setDefaultBindings();
// Turn on camera collision detection
cameraController.checkCollisions = true;
// Set collision detection radius for camera
cameraController.collisionRadius = 20;
// Aim camera at the cube primitive
cameraController.lookAt(box.coords);
// Activate camera controls
cameraController.controlsEnabled = true;
Latest touch

So, scene is ready, camera is set, we just have to "push the button".

public function HelloAlternativa3D() {

	//...

	// Initialize FPS display
	FPS.init(stage);
	// This function is for view size changes during player window changes
	addEventListener(Event.RESIZE, onResize);
	// This function enables user input processing and scene calculation every frame
	stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
	// Initial view size
	onResize(null);
}

private function onResize(e:Event):void {
	// Set view size equal to player window size
	view.width = stage.stageWidth;
	view.height = stage.stageHeight;
}

private function onEnterFrame(e:Event):void {
	// User input processing
	cameraController.processInput();
	// Scene calculating. Scene will be recalculated and all changes will be redrawed in camera.
	scene.calculate();
}
Conclusion

So, we just got basic understanding about scene creation process, and showing it on screen. We'll learn different aspects of Alternativa3D workflow in next tutorials.

Labels

 
(None)