See also:<\/p>\n\n\n\n
System:<\/p>\n\n\n\n
<\/p>\n\n\n\n
two types:<\/p>\n\n\n\n
These are canned behaviours<\/p>\n\n\n\n
Keep in mind when authoring – that if you keep going in a direction, you need to be aware about the edge of the map\u2026<\/p>\n\n\n\n
An example of a loop that a characer could walk in:<\/p>\n\n\n
\nCODE HERE\n<\/pre><\/div>\n\n\n{type: “walk”, direction: “left”},<\/p>\n\n\n\n
{type: “stand”, direction: “up”, time: 800 },<\/p>\n\n\n\n
{type: “walk”, direction: “up”},<\/p>\n\n\n\n
{type: “walk”, direction: “right”},<\/p>\n\n\n\n
{type: “walk”, direction: “down”},<\/p>\n\n\n\n
Consider having these stored somewhere that then they can swap between randomly\u2026<\/p>\n\n\n\n
<\/p>\n\n\n\n
Event system<\/strong><\/h2>\n\n\n\nThis is the battle system as an example of creating something – <\/strong><\/p>\n\n\n\nTo 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.)<\/p>\n\n\n\n
Make a folder<\/p>\n\n\n\n
\n- Battle<\/li>\n<\/ul>\n\n\n\n
Then, make 4 js files:<\/p>\n\n\n\n
\n- Battle.js<\/li>\n\n\n\n
- Combatant.js<\/li>\n\n\n\n
- SubmissionMenu.js<\/li>\n\n\n\n
- Team.js<\/li>\n<\/ul>\n\n\n\n
Also, make 4 CSS files:<\/p>\n\n\n\n
\n- Battle.css<\/li>\n\n\n\n
- Combatant.css<\/li>\n\n\n\n
- SubmissionMenu.css<\/li>\n\n\n\n
- Team.css<\/li>\n<\/ul>\n\n\n\n
In index.html<\/strong>, make a section called ‘– Battle \u2013’ Order doesn’t matter for these\u2026- but make sure you add the Battle folder into the path\u2026 Do this both for CSS and JS files:<\/p>\n\n\n\n<!-- Battle css -->\n<link href="styles\/Battle.css" type="text\/css" rel="stylesheet">\n<link href="styles\/Combatant.css" type="text\/css" rel="stylesheet">\n<link href="styles\/SubmissionMenu.css" type="text\/css" rel="stylesheet">\n<link href="styles\/Team.css" type="text\/css" rel="stylesheet">\n\n<!-- Battle -->\n<script src="Battle\/Battle.js"><\/script>\n<script src="Battle\/Combatant.js"><\/script>\n<script src="Battle\/SubmissionMenu.js"><\/script>\n<script src="Battle\/Team.js"><\/script>\n<\/pre><\/div>\n\n\nBattle.js<\/strong><\/p>\n\n\n\nMakes some dom and injects it<\/p>\n\n\n\n
This is all created in ‘createElement’:<\/p>\n\n\n
\ncreateElement() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ our starting state: <div><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.element = document.createElement("div");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <div class="Battle"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.element.classList.add("Battle");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ This is then added to the Battle div...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.element.innerHTML = (`\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class="Battle_hero">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src="${'images\/characters\/people\/hero.png'}" alt="Hero" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class="Battle_enemy">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src="${'images\/characters\/people\/npc3.png'}" alt="Enemy" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`)\n\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\nThen, init it:<\/p>\n\n\n
\ninit(container) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.createElement();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0container.appendChild(this.element);\n\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\nWill need a LOT of CSS<\/p>\n\n\n\n
Battle.css<\/strong><\/p>\n\n\n\nHugs corners of screen and overlays on top of everything\u2026<\/p>\n\n\n
\n.Battle {\n\u00a0\u00a0\u00a0\u00a0position: absolute;\n\u00a0\u00a0\u00a0\u00a0left: 0;\n\u00a0\u00a0\u00a0\u00a0right: 0;\n\u00a0\u00a0\u00a0\u00a0top: 0;\n\u00a0\u00a0\u00a0\u00a0bottom: 0;\n\u00a0\u00a0\u00a0\u00a0background-image: url(..\/images\/maps\/StreetBattle.png);\n\u00a0\u00a0\u00a0\u00a0background-size: cover;\n\u00a0\u00a0\u00a0\u00a0image-rendering: pixelated;\n}\n<\/pre><\/div>\n\n\nThen, add it into Overworld.js<\/strong>:<\/p>\n\n\n\n this.map.startCutscene([<\/p>\n\n\n\n
{type: “battle” } <\/p>\n\n\n\n
])<\/p>\n\n\n\n
Now, we need to handle this type of event in OverworldEvent.js<\/strong>:<\/p>\n\n\n\n battle(resolve){<\/p>\n\n\n\n
const battle = new Battle({<\/p>\n\n\n\n
onComplete: () => {<\/p>\n\n\n\n
resolve();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
})<\/p>\n\n\n\n
\/\/ Element we want to inject battle into<\/p>\n\n\n\n
battle.init(document.querySelector(“.game-container”));<\/p>\n\n\n\n
}<\/p>\n\n\n\n
If doing this standalone, we just need to create a battle instance and inject it into the dam (e.g. don’t need resolvers)<\/p>\n\n\n\n
So, it works, but it UGLY.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Resources<\/h2>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
See also: System: Event cues two types: 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\u2026 An example of a loop that a characer could walk in: {type: “walk”, direction: “left”}, {type: “stand”, direction: “up”, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-537","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=537"}],"version-history":[{"count":2,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/537\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/537\/revisions\/541"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}