All these tools are free – or so cheap and good that you should get them\u2026<\/p>\n\n\n\n
– aseprite > auto export to img folder<\/p>\n\n\n\n
– tiled > auto export to game map folder (.json)<\/p>\n\n\n\n
<\/p>\n\n\n\n
Node js<\/p>\n\n\n\n
– vscode > work in src folder – saving reloads\/relaunches page in browser<\/p>\n\n\n\n
runs test server plugin<\/p>\n\n\n\n
<\/p>\n\n\n\n
webpack4 as build tool<\/p>\n\n\n\n
– why?<\/p>\n\n\n\n
First, create a lib folder in the src folder. Then make a new file in lib called phaser.js.<\/p>\n\n\n\n
The code in phaser.js will simply export window.Phaser from our phaser.js file. <\/p>\n\n\n\n We can then import Phaser in the main.js file. Replace what was in main.js with this: <\/p>\n\n\n\n Make a folder called types under the src folder and put the phaser.d.ts file there.<\/p>\n\n\n\n Next, create a new file called jsconfig.json at the base of the project on the same level as index. html and insert the following: <\/p>\n\n\n\n This jsconfig.json file is to configure JavaScript handling for VS Code.<\/p>\n\n\n\n JSDoc annotation<\/p>\n\n\n\n PUBLISH<\/p>\n\n\n\n Consider how you are setting up your folders<\/p>\n\n\n\n Working<\/p>\n\n\n\n Tmx folder – Tilemap data – export to production folder<\/p>\n\n\n\n TSX folder – Tileset data – export to production folder<\/p>\n\n\n\n Production ‘export’ folder<\/p>\n\n\n\n Tileset – tileset graphics in here<\/p>\n\n\n\n Scripts > set up one to be able to refresh\/relaunch browser<\/p>\n","protected":false},"excerpt":{"rendered":" All these tools are free – or so cheap and good that you should get them\u2026 Artwork – aseprite > auto export to img folder Level editor – tiled > auto export to game map folder (.json) Coding Node js – vscode > work in src folder – saving reloads\/relaunches page in browser runs test […]<\/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-283","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/283","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=283"}],"version-history":[{"count":5,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":1010,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/283\/revisions\/1010"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}export default window.Phaser <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n import Phaser from ‘.\/lib\/phaser.js’
console.dir(Phaser)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nset up the editor to do code completion etc. using type definitions<\/h3>\n\n\n\n
{
“compilerOptions”: {
“module”: “es6”,
“target”: “es6”
}
}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nUsage<\/h3>\n\n\n\n
\/** @type {Phaser.Physics.Arcade.Sprite} *\/
player<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n