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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.