home

Here be the knowledge:

Game objects

See also:

Any game object can pass in its own animation definition/behaviour (into the sprite object, which also handles animation
Game objects all have an ID – it is drawn from the data in overworldMap…

Game objects are drawn in order of the data – e.g. top most item in data is drawn FIRST and then will be at the BOTTOM of the stack…

Game objects – how to add in new ones
see: Creating Pizzas for the Lineup! Pizza RPG Ep. 14 https://www.youtube.com/watch?v=r74OW5olIMI&list=PLcjhmZ8oLT0r9dSiIK6RB_PuBWlG1KSq_&index=23

Make new gameObject PlayerState

Make a new file “pizzaStone.js’ and add to HTML

It will extend GameObject – this is the pattern:

class PizzaStone extends GameObject {
    constructor(config){
      super(config);   
    }
}

A more fleshed out version of PizzaStone.js

(1:12) Creating Pizzas for the Lineup! Pizza RPG Ep. 14

class PizzaStone extends GameObject {
    constructor(config){
        super(config);
        this.sprite = new Sprite({
            gameObject: this,
            src: "images/characters/pizza-stone.png",
            animations: {
                "used-down"   : [ [0,0] ],
                "unused-down" : [ [1,0] ],
            },
            currentAnimation: "used-down"
        });
    }
}

The pizza stone and dough ball…

64×32 pixels

Add the pizza stone to OverworldMap.js

Place it in the demo room

pizzaStone: new PizzaStone({
   x: utils.withGrid(2),
   y: utils.withGrid(7)
})

Already, it is in the room, and is not walkable:)

Add a ‘used pizza stone’ story flag in OverworldMap.js

Add a story flag to the pizza stone in the map:

pizzaStone: new PizzaStone({
   // CODE OMITTED…
   storyFlag: "USED_PIZZA_STONE"
})

Handle the story flag in PizzaStone.js

class PizzaStone extends GameObject {
    constructor(config){
        // CODE OMITTED…
        this.storyFlag = config.storyFlag;
    }
}
update() {
   this.sprite.currentAnimation = playerState.storyFlags[this.storyFlag]
   ? "used-down"
   : "unused-down";
}

Adding the talking into PizzaStone.js

(6:10) Creating Pizzas for the Lineup! Pizza RPG Ep. 14

Two approaches to talking – see Talking and messages – two approaches

We go with OPTION 2 here…

this.talking = [
   {
      required: [this.storyFlag],
      events: [
         { type: "textMessage", text: "You have already used this."},
      ]
   },
   {
      events: [
         { type: "textMessage", text: "Approaching the legendary pizza stone..."},
         { type: "addStoryFlag", flag: this.storyFlag}
      ]
   }
]

Allow ability to pass in pizzas from config in PizzaStone.js

class PizzaStone extends GameObject {
   constructor(config){
      // CODE OMITTED…
      this.storyFlag = config.storyFlag;
      this.pizzas = config.pizzas;
      this.talking = [
         // CODE OMITTED…
         {
            events: [
               { type: "textMessage", text: "Approaching the legendary pizza stone..."},
               { type: "craftingMenu", pizzas: this.pizzas },
               { type: "addStoryFlag", flag: this.storyFlag}
            ]
         }
      ]
   }
// CODE OMITTED…
pizzaStone: new PizzaStone({
   x: utils.withGrid(2),
   y: utils.withGrid(7),
   storyFlag: "USED_PIZZA_STONE",
   pizzas: ["v001", "f001"],
})

It should now appear on screen – now, you can add extra stuff, as needed.

Resources