The Basics: Development Environment

13 May 2015  -  Jon Hall

So you survived the first post, full of technical descriptions, and trying to discourage you from forging on with your Game Engine dreams.
Congratulations, but where do you go from here?

We need a Development Environment to, well, develop our engine within. In the most simple terms, a Development Environment is the set of processes and programming tools used to create the program or software product[1].
This is slightly different from an Integrated Development Environment[2], which is more often a single program or interface wrapping all the tools of your Development Environment together into one package - so you can go from start (writing the code) to finish (playing your game) within a single application.

The basics of our Development Environment

For game development in JavaScript, we need software for at least three tasks: A text editor, a web browser, and JavaScript debug tools. On top of that, by the end of production you'll probably also make use of a graphics editor, and maybe even some modelling software.

This series of blog posts will suggest using readily available free software for your Development Environment, so that anyone can follow along and produce their own functioning Game Engine as they work through the posts.

• Text Editor

  For viewing and editing the code itself, I'd recommend a text editor that has syntax highlighting[3] available to quickly spot programmer bugs, and is able to fold[4] block statements so you can focus on a specific portion of code, and navigate your documents faster and easier. I'll use Notepad++ in the images and examples throughout this series, as it supports a vast range of languages, and is pretty much the technical descendant of Windows' most basic editor, Notepad.

• Web Browser

  The three (well, there's four, but we don't like to talk about Internet Explorer[5]) most common web browsers are Chrome, Firefox, and Safari. All of them are perfectly capable of displaying HTML pages, and executing JavaScript code (which is all we need them to do, for now). I'd recommend using Chrome, as it is what I will be testing the examples with, but whatever you already have available for use will work just as well (maybe even IE, if you're grasping at straws).

• Debug Tools

  Each of the browsers previously mentioned come bundled with a set of Developer Tools. These include the JavaScript Console (the only tool we really need to make use of, to begin with). Each browser has a different method and shortcut for accessing or enabling the DevTools. For Chrome, Ctrl-Shift-J will display the Console. This has a variety of actions available, including undock/dock to the parent window, as well as filtering and clearing log notifications. You don't need to familiarise yourself with it just yet, I'll explain what does what when it comes time to use it.

How do we use this Development Environment?

Although it may be self-explanatory, the process or pipeline[6] we will use is as follows

• Code is written, embedded, and saved as HTML[7] files in the text editor.
• Files are viewed in the web browser, and code is executed[8].
• As the code is running (during runtime, as it's known), we can view it's state[9], and any console output (including errors).
• If there's any issues, we can go back to make changes and save them, refresh the browser, and inspect the console once again.

Why do we use HTML files?

HTML files are generally considered the most basic static web pages, therefore they can be opened and viewed by any web browser (from here we're assuming JavaScript is not disabled in your web browser).

The web browser recognises embedded JavaScript in the HTML file, and executes it with a JavaScript Engine[10] which interprets, compiles, and processes all the commands you've given it in your code.

Having an 'empty' web page accessible to our JavaScript code gives us a clean slate on which we can display our text, 2D, or 3D output, as well as eventually making use of the page's built in event listeners[11] for retrieving user input.

Using the HTML page's DOM[12], we are able to dynamically load, link, and use external assets such as images, videos, and audio.

As our engine grows in complexity, we can use the HTML to load several different JavaScript files, and use them together as 'modules' for our core engine.

Basically, by using an HTML wrapper, we have a tangible static object that we can make use of for storage, output, linking, and functionality from within our JavaScript.
It gives us something we can always depend on being there, when everything else may be constantly changing.

Let's try it out

If you think you're capable of creating, editing and embedding a script, saving an HTML file, opening an HTML file in your browser and viewing the DevTools, then you can move on to the next post in this series.

Otherwise, here's your first example to follow.

1. Open your text editor, and begin with a new file (Ctrl-N)
2. Complete the most basic framework of an HTML webpage, with a script tag in the head. Although we will make use of basic HTML tags, and CSS styles occasionally during this series, you don't really need to understand much of either language while we concentrate on the JavaScript. When needed, I'll explain line-by-line what any given code is doing.
   

   <HTML>
    <HEAD>
     <SCRIPT>
      
     </SCRIPT>
    </HEAD>
    <BODY>
    </BODY>
   </HTML>

   The basic framework of an HTML file, including a Head and Body, with a Script tag available for us to use.
3. Save your HTML file wherever you like (in a project-related directory, somewhere you won't forget would be useful), as something like index.html or engine.html
4. Open the HTML file in your browser. You can do this by directly typing the filename ("file:///C:/path_to_file/engine.html") into the address bar of a new tab, or by navigating to the file in your file browser and opening it, or dragging it to your open browser. (I'd like to think you already know how to open a file, with whichever OS you're using)
5. Enable/Open the DevTools console in your browser. (Chrome: Ctrl-Shift-J, FireFox: Ctrl-Shift-K, Safari: Command-Option-C) You may need to enable use of the Developer Tools for your browser before you can use them, Google is your friend for finding exactly how to do this (Usually you'll only have to do it once, ever).
6. Back in your text editor, we will add this line between your script tags. This tells the console to log the message "Hello World", which will then be visible on your DevTools console.
   

     <SCRIPT>
      console.log("Hello World");
     </SCRIPT>

   Add the text to line 4, between your opening and closing Script tags
7. Refresh your web page in the browser, and if your DevTools are still open, you should see the output "Hello World" in the console (possibly with more information as well, such as the file and line number, and maybe even the time it was logged).

Well done!
Although this isn't a tutorial on JavaScript itself, you've just created some JavaScript code that logs output to the Developer console.
Things are only going to start getting more technical in the next blog post, but if you made it through this, you've got nothing to worry about.

Comments, Feedback, and Discussion can be found on our subreddit

/r/realmscape

[1] Definition derived from techtarget.com
[2] Microsft's Visual Studio is a well-known example of an Integrated Development Environment. IDE's usually consist of a text editor, compiler, debugger, and GUI builder within a single program.
[3] Syntax Highlighting changes the colour of your code based on syntax definitions. This is useful for avoiding open-ended strings and omitted closing brackets.
[4] Folding or Collapsing blocks in a text editor are usually notated by a [-] or [+] in the left margin. The convenience of folding is that you can 'hide' blocks of code, and see only what you are working with. In Notepad++ folding and collapsing is available under the View menu.
[5] Internet Explorer has a bit of a bad reputation for unintended side-effects and abnormal interpretation of otherwise perfectly good code.
[6] In software development, a Pipeline is a chain of elements arranged so the output of each element is the input of the next.
[7] Hypertext Markup Language (HTML), is a standard for tagging text files to apply effects on web pages. Being a Markup Language, it is recognisably similar to the well-known XML data format.
[8] The code isn't actually being sentenced to death. It's developer jargon for telling the code to begin at the start, and follow each command you've given.
[9] The State of a running program or block of code is like a snapshot; A static view of the values of variables and execution of code, at a single given time.
[10] A JavaScript engine is a virtual machine which interprets and executes JavaScript (because JavaScript is not pre-compiled, it is compiled and executed on-the-fly)
[11] An Event Listener is a handler which executes it's code when triggered by a specific event (usually only the single event that it is listening for)
[12] The HTML Document Object Model, or DOM is a tree-like structure of all the objects within a document. The DOM can be traversed and manipulated at runtime, with the results being shown next time the frame or window is rendered.