Events

See also:

System:

Event cues

two types:

• person behaviour loop
• global map cutscene

These are canned behaviours

Keep in mind when authoring – that if you keep going in a direction, you need to be aware about the edge of the map…

An example of a loop that a characer could walk in:

CODE HERE

{type: “walk”, direction: “left”},

{type: “stand”, direction: “up”, time: 800 },

{type: “walk”, direction: “up”},

{type: “walk”, direction: “right”},

{type: “walk”, direction: “down”},

Consider having these stored somewhere that then they can swap between randomly…

Event system

This is the battle system as an example of creating something – 

To make an absolute basic battle event that we can go into, do the following (and this is a starting point for any other sub-game concepts etc.)

Make a folder

• Battle

Then, make 4 js files:

• Battle.js
• Combatant.js
• SubmissionMenu.js
• Team.js

Also, make 4 CSS files:

• Battle.css
• Combatant.css
• SubmissionMenu.css
• Team.css

In index.html, make a section called ‘– Battle –’ Order doesn’t matter for these…- but make sure you add the Battle folder into the path… Do this both for CSS and JS files:

<!-- Battle css -->
<link href="styles/Battle.css" type="text/css" rel="stylesheet">
<link href="styles/Combatant.css" type="text/css" rel="stylesheet">
<link href="styles/SubmissionMenu.css" type="text/css" rel="stylesheet">
<link href="styles/Team.css" type="text/css" rel="stylesheet">

<!-- Battle -->
<script src="Battle/Battle.js"></script>
<script src="Battle/Combatant.js"></script>
<script src="Battle/SubmissionMenu.js"></script>
<script src="Battle/Team.js"></script>

Battle.js

Makes some dom and injects it

This is all created in ‘createElement’:

createElement() {
        // our starting state: <div></div>
        this.element = document.createElement("div");
        // <div class="Battle"></div>
        this.element.classList.add("Battle");
        // This is then added to the Battle div...
        this.element.innerHTML = (`
        <div class="Battle_hero">
            <img src="${'images/characters/people/hero.png'}" alt="Hero" />
        </div>

        <div class="Battle_enemy">
            <img src="${'images/characters/people/npc3.png'}" alt="Enemy" />
        </div>
        `)
    }

Then, init it:

init(container) {
        this.createElement();
        container.appendChild(this.element);
    }

Will need a LOT of CSS

Battle.css

Hugs corners of screen and overlays on top of everything…

.Battle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(../images/maps/StreetBattle.png);
    background-size: cover;
    image-rendering: pixelated;
}

Then, add it into Overworld.js:

    this.map.startCutscene([

        {type: “battle” }    

    ])

Now, we need to handle this type of event in OverworldEvent.js:

    battle(resolve){

        const battle = new Battle({

            onComplete: () => {

                resolve();

            }

        })

        // Element we want to inject battle into

        battle.init(document.querySelector(“.game-container”));

    }

If doing this standalone, we just need to create a battle instance and inject it into the dam (e.g. don’t need resolvers)

So, it works, but it UGLY.

Resources