Animation and Games Development

44
242-515 AGD: 6. Intro to jME 1 • Objective o four jME examples, which introduce concepts such as the scene graph, 3D coords, rotations around axes, game loop updates, and input Animation and Games Development 242-515, Semester 1, 2014-2015 6. Introduction to javaMonkeyEngine (jME)

description

Animation and Games Development. 242-515 , Semester 1 , 2014-2015. Objective four jME examples , which introduce concepts such as the scene graph, 3D coords, rotations around axes, game loop updates, and input. 6. Introduction to javaMonkeyEngine (jME). Overview. 1. Hello jME3 - PowerPoint PPT Presentation

Transcript of Animation and Games Development

Page 1: 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)

Page 2: Animation and Games Development

242-515 AGD: 6. Intro to jME 2

• 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

Page 3: Animation and Games Development

242-515 AGD: 6. Intro to jME 3

• 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

Page 4: Animation and Games Development

242-515 AGD: 6. Intro to jME 4

1. Hello JME3HelloJME3.java

Press "Ok"

jME Settings Window

HelloJME3 application

Page 5: Animation and Games Development

242-515 AGD: 6. Intro to jME 5

• 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

Page 6: Animation and Games Development

242-515 AGD: 6. Intro to jME 6

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

Page 7: Animation and Games Development

242-515 AGD: 6. Intro to jME 7

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()

Page 8: Animation and Games Development

242-515 AGD: 6. Intro to jME 8

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

Page 9: Animation and Games Development

242-515 AGD: 6. Intro to jME 9

What's a Scenegraph?

Page 10: Animation and Games Development

242-515 AGD: 6. Intro to jME 10

• 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)

Page 11: Animation and Games Development

242-515 AGD: 6. Intro to jME 11

• 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)

Page 12: Animation and Games Development

242-515 AGD: 6. Intro to jME 12

• 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)

Page 13: Animation and Games Development

242-515 AGD: 6. Intro to jME 13

• 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

Page 14: Animation and Games Development

242-515 AGD: 6. Intro to jME 14

2. Hello Node HelloNode.java

Page 15: Animation and Games Development

242-515 AGD: 6. Intro to jME 15

• 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

Page 16: Animation and Games Development

242-515 AGD: 6. Intro to jME 16

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)

Page 17: Animation and Games Development

242-515 AGD: 6. Intro to jME 17

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

Code

Page 18: Animation and Games Development

242-515 AGD: 6. Intro to jME 18

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);

:

Page 19: Animation and Games Development

242-515 AGD: 6. Intro to jME 19

: // 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()

Page 20: Animation and Games Development

242-515 AGD: 6. Intro to jME 20

• 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)

Page 21: Animation and Games Development

242-515 AGD: 6. Intro to jME 21

• 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

Page 22: Animation and Games Development

242-515 AGD: 6. Intro to jME 22

• 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

Page 23: Animation and Games Development

242-515 AGD: 6. Intro to jME 23

• Positive rotation around the x-axis:

• Positive rotation around the y-axis:

Page 24: Animation and Games Development

242-515 AGD: 6. Intro to jME 24

3. Hello Loop HelloLoop.java

the blue cube continuously

rotates around the y-axis

Page 25: Animation and Games Development

242-515 AGD: 6. Intro to jME 25

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

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

jme3:beginner:hello_main_event_loop

Page 26: Animation and Games Development

242-515 AGD: 6. Intro to jME 26

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

Code

Page 27: Animation and Games Development

242-515 AGD: 6. Intro to jME 27

// 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()

Page 28: Animation and Games Development

242-515 AGD: 6. Intro to jME 28

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.

Page 29: Animation and Games Development

242-515 AGD: 6. Intro to jME 29

The Game Loop

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

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)

Page 30: Animation and Games Development

242-515 AGD: 6. Intro to jME 30

• 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

Page 31: Animation and Games Development

242-515 AGD: 6. Intro to jME 31

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

Page 32: Animation and Games Development

242-515 AGD: 6. Intro to jME 32

• 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.

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

jme3:beginner:hello_input_system

Page 33: Animation and Games Development

242-515 AGD: 6. Intro to jME 33

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

Code

Page 34: Animation and Games Development

242-515 AGD: 6. Intro to jME 34

// 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()

Page 35: Animation and Games Development

242-515 AGD: 6. Intro to jME 35

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()

Page 36: Animation and Games Development

242-515 AGD: 6. Intro to jME 36

// 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)?

Page 37: Animation and Games Development

242-515 AGD: 6. Intro to jME 37

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

Page 38: Animation and Games Development

242-515 AGD: 6. Intro to jME 38

• 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

Page 39: Animation and Games Development

242-515 AGD: 6. Intro to jME 39

• 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

Page 40: Animation and Games Development

242-515 AGD: 6. Intro to jME 40

• 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

Page 41: Animation and Games Development

242-515 AGD: 6. Intro to jME 41

The Game Loop

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

simpleUpdate()is called each time

simpleInitApp()creates a jME scene graph

jME draws thescene graphautomatically

UpdateStartup Input

RenderWait

Shutdown

stoprun

game loop

two listeners

Page 42: Animation and Games Development

242-515 AGD: 6. Intro to jME 42

• 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

Page 43: Animation and Games Development

242-515 AGD: 6. Intro to jME 43

• 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

Page 44: Animation and Games Development

242-515 AGD: 6. Intro to jME 44

• 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