Pixels & Tactics

Adventures of building a 2D tactics RPG in the browser!

Transcript

1. PIXELS & TACTICS
   @amfeng
   

   View Slide

2. View Slide

3. I REALLY LIKE
   (J-) RPGS
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. WHAT GOES INTO
    A GAME?
    

    View Slide

12. DESIGN
    PATTERNS
    

    View Slide

13. COMPOSE
    EVERYTHING
    

    View Slide

14. View Slide

15. Crafty.c("Walkable", {
    Walkable: function(speed) {
    this.addComponent("Collision");
    this.bind("EnterFrame", function() {
    if (paused()) return;
    if (obstacle() || outOfBounds()) return;
    // Move the sprite
    this.playAnimation(this.direction);
    this.move(this.direction, speed);
    })
    

    View Slide

16. Crafty.c("StrollingEntity", {
    StrollingEntity: function() {
    this.direction = randomDirection();
    this.bind("EnterFrame", function() {
    // Possibly change direction
    if (chanceToSwitchDirection()) {
    this.direction = randomDirection();
    }
    }
    }
    });
    

    View Slide

17. spawnedMonster
    .Walkable(5)
    .StrollingEntity()
    .Battleable()
    

    View Slide

18. Crafty.c("AggroEntity", {
    AggroEntity: function(player) {
    this.direction = randomDirection();
    this.bind("EnterFrame", function() {
    if (playerInRange()) {
    this.direction = toPlayer(player);
    } else if (chanceToSwitchDirection()) {
    // Change direction
    this.direction = randomDirection();
    }
    }
    }
    });
    

    View Slide

19. aggroMonster
    .Walkable(10)
    .AggroEntity(player)
    .Battleable()
    

    View Slide

20. grandmaNPC
    .Walkable(2)
    .StrollingEntity()
    .Interactable(dialog)
    

    View Slide

21. player
    .Walkable(5)
    .PlayerControl()
    

    View Slide

22. *-FACTORIES
    

    View Slide

23. var Fox = function() {
    this.hp = 10;
    this.damage = 10;
    }
    var WaterFairy = function() {
    this.hp = 4;
    this.damage = 6;
    }
    var fox = new Fox();
    var waterFairy = new WaterFairy();
    

    View Slide

24. var Monster = function(attrs) {
    // Set attrs
    }
    var fox = new Monster({
    hp: 4,
    damage: 6
    });
    

    View Slide

25. View Slide

26. var MonsterFactory = function(csv) {
    this.data = createMap(csv);
    }
    MonsterFactory.prototype.create(type) {
    var attrs = this.data[type];
    return new Monster(attrs);
    }
    

    View Slide

27. // During game initialization
    factory = new MonsterFactory(csv);
    // And then later
    factory.create("fox");
    

    View Slide

28. SEPARATE VIEWS
    FROM LOGIC
    

    View Slide

29. THINGS
    I LEARNED
    (AND I AM STILL
    LEARNING)
    

    View Slide

30. ...ASSETS ARE HARD
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. (https://opengameart.org)
    

    View Slide

36. (https://gamedevmarket.net)
    

    View Slide

37. (http://pixanna.nl/products)
    

    View Slide

38. GAME DEV IS
    INFINITE
    

    View Slide

39. THANK YOU!
    LMK IF YOU END UP
    BUILDING A GAME (:
    @amfeng
    @jamescshieh
    

    View Slide