Game Development with libgdx - web developer's perspective

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

Game Development with libgdx - web developer's perspective

2b9e16af75e25ed1b4882dd536e2ecd7?s=128

Francis Lavoie

February 20, 2015
Tweet

Transcript

  1. 1.

    Game Development Game Development with libgdx with libgdx Francis Lavoie

    @Flavoie http://slides.com/francisl/deck-1?token=em4fKUFS
  2. 7.

    Then I realized that I wanted Then I realized that

    I wanted to be a game developer to be a game developer
  3. 8.

    A unique place to unleash A unique place to unleash

    your creativity your creativity
  4. 10.
  5. 14.

    Why I chose libgdx Why I chose libgdx Multi OS

    targets Web target Multi OS development Active community Bunch of modules
  6. 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
  7. 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
  8. 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
  9. 21.
  10. 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
  11. 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
  12. 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
  13. 29.

    Game blocks Game blocks Application main game Screen Game loop

    Events Actors UI, Fonts TileMaps Animations Sounds & music
  14. 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(); } }
  15. 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){} }
  16. 33.
  17. 37.

    Free Free opengameart.org Free + $ Free + $ www.graphic-buffet.com

    $ + $$ $ + $$ graphicriver.net/category/game-assets
  18. 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(); } }
  19. 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
  20. 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
  21. 42.
  22. 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)
  23. 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);
  24. 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(); } }
  25. 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(); } }
  26. 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
  27. 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; }
  28. 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); }
  29. 62.

    Sounds & music Sounds & music dig.ccmixter.org freesound.org bfxr.net Creative

    Common music Collection of soundfx Free sound mixer