HTML5 game development in Intel XDK. Part 1. Introducing the XDK

Original author: Alex L.
  • Transfer

Part 1 » Part 2 » Part 3 » Part 4 » Part 5 » Part 6 » Part 7 // End)


Want to create your own cross-platform HTML5 game? Here is the first part of the guide, which is devoted to development in the Intel XDK environment . Here we will make a game about a hungry snake, a variant of the well-known Snake. In order to implement our plans, we will use the Cocos2d-JS game engine. It is assumed that when you start reading, you know what HTML5 and JavaScript are. No prior knowledge of Cocos2d-JS and XDK is required. We suggest starting with a working environment - with Intel XDK.

image



Project Overview and Creation


Intel XDK is an integrated cross-platform application development toolkit. It allows you to quickly create HTML5 applications for devices running iOS, Android and Windows. Here you can find detailed documentation on the XDK. We will start from the very beginning, with the creation of a new project.

  1. Launch Intel XDK

  2. Log in to your account. If you don’t have one yet, register.

  3. On the start screen, you can select a template for the project or see examples of applications. To do this, respectively, you need to use the Templates or Samples lists on the left side of the window.

    Intel XDK launch window

  4. In the Start A New Project panel, go to Templates> Games.

  5. The panel that appears on the right will have a list of templates. We are interested in the Cocos2d 3.7 template, in its drop-down menu you need to select Standard HTML (Standard HTML). The default option is HTML5 + Cordova.

  6. When you click on a template or select an option, its title is highlighted. After making sure that the title of the desired template is highlighted, click on the Continue button.

    Creating a new project using the Cocos2d 3.7 template

  7. In the dialog box that appears, specify the project name (Project Name field) and its working directory (Project Directory) and click Create.

    Setting the project name and working directory

Introducing Intel XDK


After the project is created, you can start working on it. In particular, we’ll dwell on the Develop tab.

Develop tab

This is, without exaggeration, the heart of the XDK. Here you can find the built-in code editor, the navigation bar for the project files (its title is Working Files), interactive tools (Live Development Tasks), game resource manager (Game Asset Manager). Here are concentrated many of the main tools that you will use when creating games.

Emulation


The emulator is a very important tool. It allows you to quickly test the application during development. Of course, from time to time, the project must be tested on real devices, and at the last stages of development it is almost entirely on them, but an emulator is a necessary thing, seriously saving time and effort.

Switch to the Emulate tab and wait for the emulator to load. After loading and starting the project, it should turn out to be approximately the same as shown in the figure below.

A new project, opened in the built-in emulator

Of course, there is nothing on the emulator screen except the Cocos2d logo and the traditional “Hello World”, but if your first acquaintance with XDK has just taken place, this is the result. This means that everything worked for you and you are ready to continue. Let's take a closer look at the tabs of the main program window.

Project Tab


Project tab ( by Project ) - a place where you can customize the build settings for the application, start icon, splash screen, view the metadata. By clicking on this tab at the top of the program window, you will see the corresponding screen. Please note that here we are already working with a new project called Snake. Our version of the snake game will grow out of it.

Project tab

In the drop-down menus, you can find the project build options for various platforms. In the Build Settings menu, there are settings for Android, Android Crosswalk, iOS and Windows 8. Pay attention to the parameters Application ID, Application Description, Application Name, Author Name, Author and Version.

Tabs


The composition and sequence of the tabs located in the upper part of the window correspond to the development process. Let us dwell on them in more detail.

  • The Develop tab contains tools for creating program code.
  • The Emulate tab gives access to an emulator where you can run and debug programs.
  • The Test tab allows you to test a program on a physical device.
  • The Debug tab is for debugging on the device.
  • The Profile tab is needed to study the performance of programs.
  • The Build tab helps build executable files for a specific platform.

Let’s take a closer look at the Develop and Emulate tabs, with which you are already familiar.

Develop Tab and Brackets Code Editor


The main tool presented on the Develop tab is the Brackets code editor . This open source editor is designed specifically for web development. It is especially good for working with HTML5 / CSS / JS. This is facilitated, in particular, by the built-in capabilities for cross-file code editing.

Brackets is equipped with all the standard features you would expect from a similar tool. Namely, the editor supports syntax highlighting and code validation using JSHint. It contains a built-in file manager attached to the project’s working folder.

There is a slight problem with the file manager when the file list is overlapped by the Web Services panel. This happens if the screen resolution is too low. In order to fix this, you need to either minimize the panel by clicking on the minus icon in its upper right corner, or by moving the mouse pointer to the upper border of the panel and waiting for it to turn into a bidirectional arrow, reduce the size of the panel by dragging its border down.

Problem with the Web Services panel that overlaps the file list

Emulate Tab


The Emulate tab, as we have said, is used to quickly test the application on various virtual devices.

Emulate Tab

It supports everything you need to fully test your application. For example - it is able to simulate the performance of an accelerometer, GPS-receiver. With its tools, you can control the battery status of a virtual device and how it interacts with the network.

In the upper left part of the window there is a drop-down menu in which there is a list of profiles of various emulators. Here you can find a lot of things - from various iPhone models, to the Microsoft Surface Pro tablet, there are also profiles of Android devices.

The emulation functionality includes screen resolution playback. If the screen resolution of the virtual device turned out to be greater than the resolution of the computer monitor, the center of the zoom slider will help to consider the emulated screen in its entirety. Here is what the screen of one of the smartphones looks like on a scale of 50% and 100%.

View emulator screen at 50%

Viewing the emulator screen at a scale of 100%

At the top of the drop-down menu, which is used to configure emulators, there are four buttons.

Four buttons at the top of the emulator control menu.

Pay particular attention to the Reload App button and the Stop Emulator button. They are respectively located on the left and right edges of the panel. With their help, you can restart the application or stop the emulator, if the need arises.

Experiment with the slider to change the window scale of the emulated device, try to stop the emulator with the corresponding button, restart the application. Take a look at the emulator settings. If everything works out, it means that you already feel quite confident in XDK and are ready to move on.

conclusions


To summarize today's lesson. This is what you learned today and what you learned.

  • You learned how to create projects in Intel XDK.
  • Learned what files are associated with the project template.
  • Find out the purpose of the tabs of the XDK window
  • We learned how to use the Project Properties window to configure project build options, icons, and a splash screen.
  • Understood the purpose of the tab Develop
  • Learned how to use the emulator and the Emulate tab

Next time we'll talk about Cocos2d-JS.


Part 1 » Part 2 » Part 3 » Part 4 » Part 5 » Part 6 » Part 7 // End)

Also popular now: