Game Development with libgdx - web developer's perspective

Transcript

1. 1.

   Game Development Game Development with libgdx with libgdx Francis Lavoie

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

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

3. 3.

   Where did it start Where did it start

4. 4.

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

   Nathan Beach
5. 5.

   Castle Siege and Conquest II Castle Siege and Conquest II

6. 6.

   Ascendancy Ascendancy

7. 7.

   Then I realized that I wanted Then I realized that

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

   A unique place to unleash A unique place to unleash

   your creativity your creativity
9. 9.

   Past experiments Past experiments

10. 10.

    Search of fire Search of fire Focus on the fun

    part first No clear plan
11. 11.

    Spacebug Spacebug crusher crusher Make a game you want to

    play
12. 12.

    zonfbie zonfbie Hard to have commitment from the entire team

    Team organisation
13. 13.

    Technology Technology

14. 14.

    Why I chose libgdx Why I chose libgdx Multi OS

    targets Web target Multi OS development Active community Bunch of modules
15. 15.

    Other possible Other possible candidates candidates

16. 16.

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

    Phaser EaselJS
17. 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. 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. 19.

    Strategies learned Strategies learned

20. 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. 21.

    Core Game Mechanics Core Game Mechanics Object/Enemies' interactions How to

    die Navigation Points? Perks? Bonus Physics
22. 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. 23.

    Start ugly but Start ugly but playable playable

24. 24.

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

25. 25.

    Expectations Expectations 6 months is enough Programming is the most

    important part of the job!
26. 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. 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. 28.

    Basics Basics

29. 29.

    Game blocks Game blocks Application main game Screen Game loop

    Events Actors UI, Fonts TileMaps Animations Sounds & music
30. 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. 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. 32.

    Make it less ugly Make it less ugly

33. 33.

    What you will need What you will need Graphics Tile

    Spritesheet UI Widgets Fonts
34. 34.

    Tools Tools Krita/gimp Texture packer Tiled

35. 35.

    TexturePacker TexturePacker Create sprite/spritesheet Color optimization Trimming Cropping

36. 36.

    TexturePacker TexturePacker

37. 37.

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

    $ + $$ $ + $$ graphicriver.net/category/game-assets
38. 38.

    Put some life in Put some life in actors actors

39. 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. 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. 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. 42.

    atan2 atan2 atan2() angle between the hypotenuse and the 0-degree

    line atan2f() returns a value in radians
43. 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. 44.

    Pythagoras theorem Pythagoras theorem opposite2 + adjacent2 = hypotenuse2 opposite2

    + adjacent2 = hypotenuse2
45. 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. 46.

    Nothing's flying Nothing's flying

47. 47.

    Tiledmap Tiledmap Parallax Parallax

48. 48.

    Orthogonal Orthogonal

49. 49.

    Isometric Isometric Staggered Staggered

50. 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. 51.

    Performance Performance

52. 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. 53.

    Example html canvas Example html canvas

54. 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. 55.

    Collisions Collisions

56. 56.

    Use of actor rectangle Use of actor rectangle Fast Simple

    Work with html target
57. 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. 58.

    Animation Animation

59. 59.

    Tools Tools TexturePacker Spine

60. 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. 61.

    Ambiance Ambiance

62. 62.

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

    Common music Collection of soundfx Free sound mixer
63. 63.

    Mobile & Html Mobile & Html

64. 64.

    Technologies Technologies RoboVM [GWT]

65. 65.

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