Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Game Development with libgdx - web developer's perspective

2b9e16af75e25ed1b4882dd536e2ecd7?s=47 Francis Lavoie
February 20, 2015

Game Development with libgdx - web developer's perspective


Francis Lavoie

February 20, 2015


  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

  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