Develop HTML5 games in Intel XDK. Part 1. Introduction to the XDK

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

Want to create your own cross-platform HTML5 game? Before you - the first part of the manual, which is devoted to the development in the environment of Intel XDK . Here we will make a game about a hungry snake, a variant of the well-known Snake.

')

In order to implement the plans, we will use the Cocos2d-JS game engine. It is assumed that when you start reading, you know what HTML5 and JavaScript are. Preliminary acquaintance with Cocos2d-JS and XDK is not required. We offer to start with a working environment - with Intel XDK.

Overview and Project Creation

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

Launch Intel XDK
Log in to your account. If you still do not have it - register.
On the start screen, you can select a template for the project or see sample applications. To do this, respectively, you need to use the Templates or Samples in the left part of the window.

Intel XDK start window
In the Start A New Project panel, go to Templates> Games.
In the panel that appears on the right, there will be 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 version is set to HTML5 + Cordova.
When you click on a template or select an option, its title is highlighted. After confirming that the title of the desired template is highlighted, click on the Continue button.

Creating a new project on the template Cocos2d 3.7
In the dialog box that appears, specify the project name (Project Name field) and its working directory (Project Directory) and click the Create button.

Setting up the project name and working directory

Introducing Intel XDK

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

Development tab (Develop)

This, without exaggeration, is the heart of XDK. Here you can find the built-in code editor, project file navigation panel (its title is Working Files), interactive tools (Live Development Tasks), and game resource manager (Game Asset Manager). 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 should be tested on real devices, and at the last stages of development - almost entirely exclusively on them, but the emulator is a necessary thing, seriously saving time and effort.

Switch to the Emulate tab and wait for the emulator to load. After downloading and running the project should be about the same as shown in the figure below.

New project opened in the embedded emulator

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

Project tab

The Project tab is a place where you can customize the application build parameters, the launch icon, the splash screen, and view metadata. Clicking on this tab at the top of the program window, you will see the corresponding screen. Please note, here we are already working with a new project called Snake. From it grow our version of the game about the snake.

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 settings of the Application ID (App ID), Application Description (App Description), Application Name (App Name), Author (Author) and Version.

Tabs

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

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

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

Development tab and Brackets code editor

The main tool presented on the Development tab (Develop) is the Brackets code editor. This open source editor was created 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 that can be expected from such a tool. Namely, the editor supports syntax highlighting and code validation using JSHint. It contains a built-in file manager tied to the working folder of the project.

There is a small problem with the file manager when the file list is overlapped by the Web Services panel. This happens if the screen resolution is too small. To fix this, you either need to 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 double-headed arrow, reduce the size of the panel by dragging its border down.

The problem with the panel Web Services (Web Services), which overlaps the list of files

Emulate tab

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

Emulate tab

It supports everything you need to thoroughly test the application. For example, it is able to simulate the performance of an accelerometer, a GPS receiver. Its means can control the state of a virtual device's battery and how it interacts with the network.

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

The emulation functionality includes screen resolution playback. If the resolution of the virtual device screen turned out to be larger than the resolution of the computer monitor, consider the entire screen emulated screen will help the slider, located at the top of the window, in the center. This is how the screen of one of the smartphones on the scale of 50% and 100% looks like.

View emulator screen at 50% scale

View emulator screen at 100% scale

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 and Stop Emulator buttons. 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 zoom the window of the emulated device, try stopping the emulator with the appropriate button, restart the application. Look at the emulator settings. If everything works out - it means that you already feel pretty confident in the XDK and are ready to go further.

findings

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

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

Next time let's talk about Cocos2d-JS.