Animation and Games Development

242-515 AGD: 6. Intro to jME 1

• Objectiveo four jME examples, which introduce

concepts such as the scene graph, 3D coords, rotations around axes, game loop updates, and input

Animation and Games

Development242-515, Semester 1, 2014-2015

6. Introduction to javaMonkeyEngine (jME)


• 1. Hello jME3o game loop, frame rate, scenegraph, spatials,

geometry, 3D coods

• 2. Hello Nodeo Node parent and children, rotations around axes

• 3. Hello Loopo updating the scene graph; game loop again

• 4. Hello Inputo input manager (triggers, named actions, listeners),

game loop again

Overview


• For details on how to install jME, see the course website document Installing_jME.pdf at:o http://fivedots.coe.psu.ac.th/Software.coe/

242-515_AGD/jME_Code/o the examples in this part (and future parts) are also in

that directory

• A copy of the jME installer for Windows is at:o http://fivedots.coe.psu.ac.th/Software.coe/

242-515_AGD/software/

• or visit the jME website at:o http://jmonkeyengine.com/

Installing jME


1. Hello JME3HelloJME3.java

Press "Ok"

jME Settings Window

HelloJME3 application


• A blue 3D cube is displayed, which can be translated and rotated with the mouse and the WASD and arrow keys.

• Press <ESC> to quit the application.

• Original code explained at:o http://jmonkeyengine.org/wiki/doku.php

/jme3:beginner:hello_simpleapplication


public static void main(String[] args) { HelloJME3 app = new HelloJME3(); app.setShowSettings(false); // to switch off the jME settings window

/* fixes frame rate otherwise it goes at 999 FPS, and the WASD and arrow keys hardly respond */ AppSettings settings = new AppSettings(true); settings.setFrameRate(60); // 60 FPS maximum app.setSettings(settings);

app.start(); } // end of main()

Code


public void simpleInitApp() /* called automatically at game startup; should contain initialzation code */ { Box b = new Box(Vector3f.ZERO, 1, 1, 1); // create 2x2x2 cube shape at the origin Geometry geom = new Geometry("Box", b); // create geometry from the box shape

Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); // create an unlit material mat.setColor("Color", ColorRGBA.Blue); // set color of material to blue

geom.setMaterial(mat); rootNode.attachChild(geom); // add the cube to the scene } // end of simpleInitApp()


Game Loop Revisted

setFrameRate(60)delays the loopso the frame rateis not too fast

no code here yet (by me)

simpleInitApp()creates a jME scene graph jME draws the

scene graphautomatically

UpdateStartup Input

RenderWait

Shutdown

stoprun

game loop


What's a Scenegraph?


• All the nodes in a jME scene graph are subclasses of the Spatial classo called spatials

• Two types of spatial:o Geometry: this class is used to create visible 3D

objects, such as boxes, building, carso Node: this class is used for create invisible objects

which group other spatials(often Geometry spatials) together• rootNode is the top-level node in the graph

• All spatials can be transformed (e.g translated, rotated)


• Most Geometry objects use a Material object to specify their color and other properties.

HelloJME3 Scene Graph

rootNode

geom(a Geometry object)

mat(a Material object)


• A Geometry object uses 3D (x, y, z) coordinates to define its size and position in space.

Geometry Objects in 3D Space

+x

+y

+z

-x

-z

-y

(0,0,0)


• In HelloJME3, the box is defined as being 2x2x2, and is centered at the origin by default:

Box b = new Box(Vector3f.ZERO, 1, 1, 1); // create 2x2x2 cube shape at the origin Geometry geom = new Geometry("Box", b); // create geometry from the box shape

sides of length 2


2. Hello Node HelloNode.java


• A red box is postioned above a blue box in the scene.

• The two box objects are connected to a Node object in the scene grapho they become its children

• The Node object is rotated by 45 degrees around the z-axis, causing its two child boxes to rotate.

• Original code explained at:o http://jmonkeyengine.org/wiki/doku.php/

jme3:beginner:hello_node


HelloNode ScenegraphrootNode

blueCubeGeometry(initially at (0,-1,0)

mat mat

pivot, a Node object(rotated by 45 degrees around the z-axis)

redCubeGeometry(initially at (0,3,0)


public static void main(String[] args) { HelloNode app = new HelloNode(); // : same as HelloJME3 // : app.start(); } // end of main()

Code


public void simpleInitApp() { // create a 2x2x2 blue cube at (0,-1,0) Box box1 = new Box(new Vector3f(0,-1,0), 1, 1, 1); Geometry blueCube = new Geometry("Box", box1); Material mat1 = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat1.setColor("Color", ColorRGBA.Blue); blueCube.setMaterial(mat1);

// create a 2x2x2 red cube at (0,3,0) above the blue cube Box box2 = new Box(new Vector3f(0,3,0), 1, 1, 1); Geometry redCube = new Geometry("Box", box2); Material mat2 = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat2.setColor("Color", ColorRGBA.Red); redCube.setMaterial(mat2);

:


: // Create a node at (0,0,0); attach it to root node Node pivot = new Node("pivot"); rootNode.attachChild(pivot);

// Attach the two boxes to the node pivot.attachChild(blueCube); pivot.attachChild(redCube);

// Rotate the node 45 degrees around z-axis // Note that both cubes are rotated pivot.rotate(0, 0, (float)Math.toRadians(45)); } // end of simpleInitApp()


• Before the cubes are added to the scene, the red cube is at (0, 3, 0) and the blue cube is at (0, -1, 0):

Initial Cube Positions

+x

+y

+z (0, -1, 0)

both boxes havesides of length 2

(0, 3, 0)


• The 45 degree rotation of the Node around the +z axis at (0,0,0) causes its two child nodes to be rotated when they are added to the scene:

Final Cube Positions

+x

+y

+z


• The direction of the rotation (e.g. to the left around the z-axis) can be worked out with the right-hand rule:o aim the thumb of your right hand along the positive

axis of rotationo your fingers will point in the direction of a positive

rotation around that axiso e.g. a positive rotation around the z-axis:

Direction of Rotation


• Positive rotation around the x-axis:

• Positive rotation around the y-axis:


3. Hello Loop HelloLoop.java

the blue cube continuously

rotates around the y-axis


• A single blue cube rotates continuously around the y-axis to the right via the update action in the game loop.


jme3:beginner:hello_main_event_loop


public static void main(String[] args) { HelloLoop app = new HelloLoop(); // : same as HelloJME3 // : app.start(); } // end of main()

Code


// global private Geometry blueCube;

public void simpleInitApp() { Box b = new Box(Vector3f.ZERO, 1, 1, 1); blueCube = new Geometry("blue cube", b); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setColor("Color", ColorRGBA.Blue); blueCube.setMaterial(mat);

rootNode.attachChild(blueCube); } // end of simpleInitApp()


public void simpleUpdate(float tpf) // update action, called from game loop automatically // the blueCube rotates around the y-axis to the right { blueCube.rotate(0, 2*tpf, 0); }

• simpleUpdate() is called by the game engine on each game loop iteration.


The Game Loop


simpleUpdate()is called each time

simpleInitApp()creates a jME scene graph

jME draws thescene graphautomatically

UpdateStartup Input

RenderWait

Shutdown

stoprun

game loop

no code here yet (by me)


• simpleUpdate() calls rotate() using 2*tpf as the rotation amount (which is in radians) around the y-axis

• the tpf variable ("time per frame") is 1/ frame rateo so, for my code tpf = 1/60 ~= 0.017o 2*0.017 radians ~= 2 degreeso this is a positive rotation around the

y-axis, which means it turns to the right

The Rotation Details


4. Hello Input HelloInput.java

the blue cube rotates by a fixed amount around the y-axis when <SPACE> or the left button is

pressed


• A single blue cube as before, but four keys ('P', 'J', 'K', and ' ') and the left mouse button are mapped to new actions.

• Illustrates how the game loop deals with user input, by using listeners.


jme3:beginner:hello_input_system


public static void main(String[] args) { HelloInput app = new HelloInput(); // : same as HelloJME3 // : app.start(); } // end of main()

Code


// globals private Geometry blueCube; private Boolean isRunning = true;

public void simpleInitApp() { Box b = new Box(Vector3f.ZERO, 1, 1, 1); blueCube = new Geometry("blue cube", b); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setColor("Color", ColorRGBA.Blue); blueCube.setMaterial(mat);

rootNode.attachChild(blueCube); initKeys(); } // end of simpleInitApp()


private void initKeys() // link key/mouse input triggers to listeners { // map key/mouse input triggers to named actions inputManager.addMapping("Pause", new KeyTrigger(KeyInput.KEY_P)); inputManager.addMapping("Left", new KeyTrigger(KeyInput.KEY_J)); inputManager.addMapping("Right", new KeyTrigger(KeyInput.KEY_K)); inputManager.addMapping("Rotate", new KeyTrigger(KeyInput.KEY_SPACE), new MouseButtonTrigger(MouseInput.BUTTON_LEFT));

// attach named actions to listeners inputManager.addListener(actListener, new String[]{"Pause"}); inputManager.addListener(anaListener, new String[]{"Left", "Right", "Rotate"}); } // end of initKeys()


// two global listeners

private ActionListener actListener = new ActionListener() { public void onAction(String name, boolean keyPressed, float tpf) { if (name.equals("Pause") && !keyPressed) isRunning = !isRunning; } }; is the input trigger (key)

pressed or not (i.e. released)?


private AnalogListener anaListener = new AnalogListener() { public void onAnalog(String name, float value, float tpf) { if (isRunning) { if (name.equals("Rotate")) blueCube.rotate(0, value*speed, 0); else if (name.equals("Right")) { Vector3f v = blueCube.getLocalTranslation();

blueCube.setLocalTranslation(v.x + value*speed, v.y, v.z); } else if (name.equals("Left")) { Vector3f v = blueCube.getLocalTranslation();

blueCube.setLocalTranslation(v.x - value*speed, v.y, v.z); } } else System.out.println("Press P to unpause."); } // end of onAnalog() };

stores how long the input trigger (key)has been pressed


• The jME inputManger object can be used to link key/mouse inputs (triggers) to listener objects o when a key (or the mouse) is pressed or released, a

listener will be executed

• The links are created in two steps:o addMapping(): maps key/mouse triggers to named

actions (strings)

o addListener(): attaches named actions to listener objects

Listening for Input


• A complete list of input triggers can be found at:o http://jmonkeyengine.org/wiki/doku.php/

jme3:advanced:input_handling

Triggers Names Listeners

P

J

K

' 'mouse

left

"Pause"

"Left"

"Right"

"Rotate"

ActionListenerobject

AnalogListenerobject


• ActionListener• used to detect on/off actions caused by a key

press/release or mouse button press/release

• AnalogListener• used to detect continuous or gradual actions• the onAnalog() value argument is a float which records

how long the input trigger has been pressed

Listener Types


The Game Loop


simpleUpdate()is called each time

simpleInitApp()creates a jME scene graph

jME draws thescene graphautomatically

UpdateStartup Input

RenderWait

Shutdown

stoprun

game loop

two listeners

http://www.google.com/imgres?imgurl=www.aclcomputers.com/images/Logitech-Keyboard-Mouse.GIF&imgrefurl=http://www.aclcomputers.com/cases.htm&h=91&w=100&prev=/images?q=keyboard+mouse+filetype:gif&imgsz=small&svnum=10&hl=en&lr=&ie=UTF-8&oe=UTF-8&sa=N


• The onAnalog() method is called with the arguments:o onAnalog(String name, float value, float tpf)

o name is the named action string (e.g. "Pause")o value is the length of time the key or mouse has been

pressed• this will be be at most the time for one game loop = tpf

= time per frame = 1/ frame rate = 1/60 ~= 0.017 secs

AnalogListener in Detail


• In onAnalog(), the "Left" and "Right" named actions make the cube move to the left and right along the x-axis. How?

• The code for "Right":o Vector3f v = blueCube.getLocalTranslation();

blueCube.setLocalTranslation(v.x + value*speed, v.y, v.z);

• getLocationTranslation() gets the current (x, y, z) location of the cube, and setLocalTranslation() adds value*speed to the x value.

Translating the Cube

+X-X0


• Where's speed defined?o speed is a protected float inherited from the

SimpleApplication class (although it's actually from the Application class)

o speed's value is 1.0f

Animation and Games Development

Documents

Transcript of Animation and Games Development