Creating the Editor

The editor consists of a layer of editing tools that sits on top of the existing platformer code. By making use of as much of the existing platformer code as possible, the editor needs to add only the ability to move the view around and changes tiles.

Modifying the Platform Game

The changes needed to get the editor code into the existing platform.js file are minimal. Open up the index.html file in the public/ directory and add the soon-to-be-created quintus_editor.js file, as shown in Listing 19-3.

Listing 19-3: Modified index.html file

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=0, 
minimum-scale=1.0, maximum-scale=1.0"/>
    <title>Platformer</title>
    <script src='js/jquery.min.js'></script>
    <script src='js/underscore.js'></script>
    <script src='js/quintus.js'></script>
    <script src='js/quintus_input.js'></script>
    <script src='js/quintus_sprites.js'></script>
    <script src='js/quintus_scenes.js'></script>
    <script src='js/quintus_anim.js'></script>
    <script src='js/quintus_platformer.js'></script>
    <script src='js/quintus_editor.js'></script>
    <script src='platform.js'></script>
    <style>
      * { padding:0px; margin:0px; }
    </style>
  </head>
  <body>
  </body>
</html>

Next open up the platform.js file in the same directory; at the top of the file, add the Editor module and remove the controls call. (Controls will be enabled later by the editor.)

$(function() {
  var Q = window.Q 
        = Quintus()
          .include(' ...

Get Professional HTML5 Mobile Game Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial