A Game Engine From Scratch In JavaScript Part 4 – Editor & Debugger

View post on imgur.com

The editor serves as a live debugger and allows modifying the game objects in real-time. These are canvas sprites we’re talking about, not DOM elements. While this is still a work in progress, I wanted to share a screen capture so you can see how it might end up looking. The next screen capture shows some live editing capabilities.

View post on imgur.com

The editor includes a menu and dialog box system with drag-drop support so you can arrange the UI however you want. I’m currently using jQuery for the DOM selectors and FontAwesome for the icons, but these dependencies will probably be eliminated at some point. Without the dependencies, the entire engine (with editor) weighs a measly 93KB unminified.

There is a neat “pause” button which will pause the JavaScript debugger at the desired code point for further analysis via the dev console, without having to explicitly place a debugger statement there.

The mouse hover effects are not CSS or DOM related, they are native hover effects designed for the entities that get rendered to canvas. It’s easy to work with in your code e.g. myEntity.on(“hover”, function() { // do something on hover }); and it supports other events such as click, mousemove, hover-leave, etc.

As this engine is pure JavaScript, everything can run from the client’s local file system (a web server is not required). There is no build, minify or compile step required, though one might be added in the future to improve download time especially for mobile.


Tags: , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *