Game Development Game Development with libgdx with libgdx Francis Lavoie @Flavoie http://slides.com/francisl/deck-1?token=em4fKUFS 

A web A web developer's perspective developer's perspective 

Where did it start Where did it start 

The Commodore 64 The Commodore 64 source : http://en.wikipedia.org/wiki/File:Commodore_1541_front_cropped.jpg by Nathan Beach 

Castle Siege and Conquest II Castle Siege and Conquest II 

Ascendancy Ascendancy 

Then I realized that I wanted Then I realized that I wanted to be a game developer to be a game developer 

A unique place to unleash A unique place to unleash your creativity your creativity 

Past experiments Past experiments 

Search of fire Search of fire Focus on the fun part first No clear plan 

Spacebug Spacebug crusher crusher Make a game you want to play 

zonfbie zonfbie Hard to have commitment from the entire team Team organisation 

Technology Technology 

Why I chose libgdx Why I chose libgdx Multi OS targets Web target Multi OS development Active community Bunch of modules 

Other possible Other possible candidates candidates 

2d 2d JavaScript webgl fallback to canvas (pixi.js) JavaScript webgl Phaser EaselJS 

3d 3d C#, boo, unityscript Native Desktop, Mobile and webgl JavaScript webgl JavaScript, TypeScript webgl JavaScript webgl unity3d.com threejs.org babylonjs.com biz.turbulenz.com 

If you want more If you want more choices choices http://html5gameengine.com http://html5gameengine.com http://forums.tigsource.com/index.php?topic=21471.0 http://forums.tigsource.com/index.php?topic=21471.0 

Strategies learned Strategies learned 

The pen is the ideal tool for The pen is the ideal tool for prototyping prototyping Levels A rough back-story with base character Items, power-ups or any other elements Design sketch 

Core Game Mechanics Core Game Mechanics Object/Enemies' interactions How to die Navigation Points? Perks? Bonus Physics 

Key qualities Key qualities 1. Are entered willfully 2. Have goals 3. Have conflict 4. Have rules 5. Can be won and lost 6. Are interactive 7. Have a challenge 8. Can create their own internal value 9. Engage the player 10. Are a closed, formal system Games Games ** from The Art of Game Design by Jesse Schell 

Start ugly but Start ugly but playable playable 

A web A web developer's perspective developer's perspective 

Expectations Expectations 6 months is enough Programming is the most important part of the job! 

Challenge for a web developer Challenge for a web developer No more request-based call No routes and controller No more business logic - but real math No more transparent GC in the background 

Plus a bunch of new tools Plus a bunch of new tools A java IDE (Intellij/Eclipse) Or any other authoring tools Graphic editor Texture (map, atlasing) Sound editing 

Basics Basics 

Game blocks Game blocks Application main game Screen Game loop Events Actors UI, Fonts TileMaps Animations Sounds & music 

Main game Main game import com.badlogic.gdx.Game; public class AlbatrosD2Game extends Game { public String title = "Albatros DII"; public MenuScreen getMenuScreen() { return new MenuScreen(this); } public PlayScreen getPlayScreen() { return new PlayScreen(this); } @Override public void create () { setScreen(getPlayScreen()); } @Override public void render () { super.render(); } } 

Actors Actors ... public class Bullet extends GameActor { public Bullet(int speed, float scale, float angle Vector2 pos, Vector2 direction, ){ } @Override public void draw(Batch batch, float alpha){} } 

Make it less ugly Make it less ugly 

What you will need What you will need Graphics Tile Spritesheet UI Widgets Fonts 

Tools Tools Krita/gimp Texture packer Tiled 

TexturePacker TexturePacker Create sprite/spritesheet Color optimization Trimming Cropping 

TexturePacker TexturePacker 

Free Free opengameart.org Free + $ Free + $ www.graphic-buffet.com $ + $$ $ + $$ graphicriver.net/category/game-assets 

Put some life in Put some life in actors actors 

Take Take control control import com.badlogic.gdx.Input; @Override public void act(float delta){ if(Gdx.input.isKeyPressed(Input.Keys.A)) { movingSideway = moveLeft(); } else if(Gdx.input.isKeyPressed(Input.Keys.D)) { movingSideway = moveRight(); } } 

Remember trigonometry? Remember trigonometry? Target an enemy Calculate direction Get the distance between two objects http://www.raywenderlich.com/35866/trigonometry-for-game-programming-part-1 by Matthijs Hollemans 

Radians vs. Radians vs. degress degress Radians are expressed in terms of π 1 radian = radius length on the arc of the circle ~6.28 radian = Circle arc 2π radian = Circle arc = 360 degrees Angle in degrees = (Angle in radians / 2π) * 360 

atan2 atan2 atan2() angle between the hypotenuse and the 0-degree line atan2f() returns a value in radians 

Know angle Know angle and length and length Know 2 sides Know 2 sides sin(angle) = opposite / hypotenuse cos(angle) = adjacent / hypotenuse tan(angle) = opposite / adjacent angle = arcsin(opposite / hypotenuse) angle = arccos(adjacent / hypotenuse) angle = arctan(opposite / adjacent) 

Pythagoras theorem Pythagoras theorem opposite2 + adjacent2 = hypotenuse2 opposite2 + adjacent2 = hypotenuse2 

Set the direction of an actor private Vector2 direction = new Vector2(); float angleRadians = (rotationAngle+90) * MathUtils.degreesToRadians; direction.set(MathUtils.cos(angleRadians), MathUtils.sin(angleRadians)).nor(); Compute the trajectory private Vector2 direction; private Vector2 position = new Vector2(); private Vector2 computeVelocity = new Vector2(); computeVelocity.set(direction).scl(velocity); position.add(computeVelocity); sprite.setX(position.x); sprite.setY(position.y); 

Nothing's flying Nothing's flying 

Tiledmap Tiledmap Parallax Parallax 

Orthogonal Orthogonal 

Isometric Isometric Staggered Staggered 

import ...OrthogonalTiledMapRenderer; public class ParallaxBackground { public ParallaxBackground (float w, float h, String mapSelection){ map = new TmxMapLoader().load("tiles/daland.tmx"); mapRenderer = new OrthogonalTiledMapRenderer(map); camera = new OrthographicCamera(); camera.viewportHeight = h; camera.viewportWidth = w; camera.position.y = h/2; MapProperties prop = map.getProperties(); int mapWidth = prop.get("width", Integer.class); int mapHeight = prop.get("height", Integer.class); int tilePixelWidth = prop.get("tilewidth", Integer.class); int tilePixelHeight = prop.get("tileheight", Integer.class); mapPixelHeight = mapHeight * tilePixelHeight; } public void render(float velocity){ if (camera.position.y > mapPixelHeight + camera.viewportHeight){ cameraElevation = 0 - (int) camera.viewportHeight; } camera.translate(0, 1f * velocity, 0); camera.update(); mapRenderer.setView(camera); mapRenderer.render(); } } 

Performance Performance 

Object pool Object pool The garbage collector is your enemy public abstract class GameActorPool { public ArrayList actorArray; public ArrayList deadActorArray; public List tmpGameActorList; protected Group group; public GameActorPool(Group group){ this.group = group; actorArray = new ArrayList(); deadActorArray = new ArrayList(); tmpGameActorList = new ArrayList(); } ... public boolean hasActor(){ return actorArray.size() > 0; } public void reset(){ ... int dasize = deadActorArray.size(); for(int i = 0; i < dasize; i++){ GameActor b = deadActorArray.get(i); b.reset(); actorArray.add(b); } deadActorArray.clear(); } } 

Example html canvas Example html canvas 

Many objects need to Many objects need to be manually deallocated be manually deallocated https://github.com/libgdx/li https://github.com/libgdx/li bgdx/wiki/Memory- bgdx/wiki/Memory- management management 

Collisions Collisions 

Use of actor rectangle Use of actor rectangle Fast Simple Work with html target 

Simple Simple collision collision public Boolean collidingWith(GameActor actor){ if (actor.state == State.ALIVE && this.state == State.ALIVE && Intersector.overlaps(this.getRectangle(), actor.getRectangle())) { this.collide(); actor.collide(); return true; } return false; } 

Animation Animation 

Tools Tools TexturePacker Spine 

// EXPLOSION protected static final int FRAME_COLS = 4; protected static final int FRAME_ROWS = 4; protected static final String EXPLOTION_SPRITE = "sprites/explosion/explosion1.png"; public void createExplosion() { explosionSheet = new Texture(Gdx.files.internal(EXPLOTION_SPRITE)); TextureRegion[][] tmp = TextureRegion.split(explosionSheet, explosionSheet.getWidth()/FRAME_COLS, explosionSheet.getHeight()/FRAME_ROWS); TextureRegion[] explosionFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS]; int index = 0; for (int i = 0; i < FRAME_ROWS; i++) { for (int j = 0; j < FRAME_COLS; j++) { explosionFrames[index++] = tmp[i][j]; } } explosionAnimation = new Animation(0.055f, explosionFrames); } public boolean drawExplosion(Batch batch, float posX, float posY, float width, float height) { explosionTime += Gdx.graphics.getDeltaTime(); explosionCurrentFrame = explosionAnimation.getKeyFrame(explosionTime, true); batch.draw(explosionCurrentFrame, posX, posY, width, height); return (explosionTime > 0.45f); } 

Ambiance Ambiance 

Sounds & music Sounds & music dig.ccmixter.org freesound.org bfxr.net Creative Common music Collection of soundfx Free sound mixer 

Mobile & Html Mobile & Html 

Technologies Technologies RoboVM [GWT] 

Fin Fin http://francisl.net/2015/02/18/game-development-links/ https://joind.in/13344