Game Development with libgdx - web developer's perspective

1. Game Development Game Development with libgdx with libgdx Francis Lavoie @Flavoie http://slides.com/francisl/deck-1?token=em4fKUFS
2. A web A web developer's perspective developer's perspective
3. Where did it start Where did it start
4. The Commodore 64 The Commodore 64 source : http://en.wikipedia.org/wiki/File:Commodore_1541_front_cropped.jpg by Nathan Beach
5. Castle Siege and Conquest II Castle Siege and Conquest II
6. Ascendancy Ascendancy
7. Then I realized that I wanted Then I realized that I wanted to be a game developer to be a game developer
8. A unique place to unleash A unique place to unleash your creativity your creativity
9. Past experiments Past experiments
10. Search of fire Search of fire Focus on the fun part first No clear plan
11. Spacebug Spacebug crusher crusher Make a game you want to play
12. zonfbie zonfbie Hard to have commitment from the entire team Team organisation
13. Technology Technology
14. Why I chose libgdx Why I chose libgdx Multi OS targets Web target Multi OS development Active community Bunch of modules
15. Other possible Other possible candidates candidates
16. 2d 2d JavaScript webgl fallback to canvas (pixi.js) JavaScript webgl Phaser EaselJS
17. 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
18. 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
19. Strategies learned Strategies learned
20. 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
21. Core Game Mechanics Core Game Mechanics Object/Enemies' interactions How to die Navigation Points? Perks? Bonus Physics
22. 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
23. Start ugly but Start ugly but playable playable
24. A web A web developer's perspective developer's perspective
25. Expectations Expectations 6 months is enough Programming is the most important part of the job!
26. 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
27. 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
28. Basics Basics
29. Game blocks Game blocks Application main game Screen Game loop Events Actors UI, Fonts TileMaps Animations Sounds & music
30. 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(); } }
31. 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){} }
32. Make it less ugly Make it less ugly
33. What you will need What you will need Graphics Tile Spritesheet UI Widgets Fonts
34. Tools Tools Krita/gimp Texture packer Tiled
35. TexturePacker TexturePacker Create sprite/spritesheet Color optimization Trimming Cropping
36. TexturePacker TexturePacker
37. Free Free opengameart.org Free + $ Free + $ www.graphic-buffet.com $ + $$ $ + $$ graphicriver.net/category/game-assets
38. Put some life in Put some life in actors actors
39. 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(); } }
40. 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
41. 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
42. atan2 atan2 atan2() angle between the hypotenuse and the 0-degree line atan2f() returns a value in radians
43. 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)
44. Pythagoras theorem Pythagoras theorem opposite2 + adjacent2 = hypotenuse2 opposite2 + adjacent2 = hypotenuse2
45. 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);
46. Nothing's flying Nothing's flying
47. Tiledmap Tiledmap Parallax Parallax
48. Orthogonal Orthogonal
49. Isometric Isometric Staggered Staggered
50. 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(); } }
51. Performance Performance
52. Object pool Object pool The garbage collector is your enemy public abstract class GameActorPool { public ArrayList<GameActor> actorArray; public ArrayList<GameActor> deadActorArray; public List<GameActor> 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(); } }
53. Example html canvas Example html canvas
54. 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
55. Collisions Collisions
56. Use of actor rectangle Use of actor rectangle Fast Simple Work with html target
57. 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; }
58. Animation Animation
59. Tools Tools TexturePacker Spine
60. // 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); }
61. Ambiance Ambiance
62. Sounds & music Sounds & music dig.ccmixter.org freesound.org bfxr.net Creative Common music Collection of soundfx Free sound mixer
63. Mobile & Html Mobile & Html
64. Technologies Technologies RoboVM [GWT]
65. Fin Fin http://francisl.net/2015/02/18/game-development-links/ https://joind.in/13344