GC devkit Quick Start-game Overview (1)

Connect to http://www.cnblogs.com/hangxin1940/archive/2013/04/09/3011424.html

Whack that mole! (Moles) the game is a game built into the devkit engine. By learning the source code of the game, we will understand how these devkit components are organized together.

# Game Installation

Start the service first

$ Basil serve

It will start on port '123' and open 'HTTP: // localhost: 123456' in the browser'

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/basil-start.png "devkit ")

Devkit loads the moles game in advance and selects 'project' in the left-side navigation bar '.

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/basil-projects.png "devkit ")

Select the game icon and click 'simulate' to run the simulator in a new window.

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/game-title.png "devkit ")

# Browser debugging

To do this, you must first sharpen the tool. We need a powerful debugging tool, hello World in the previous section! , We know how to use the UI monitoring tool and debug code in the console.

Now we can use the UI monitoring tool to look at the scene structure of moles.

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/ui-inspector.png "devkit ")

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/game-console.png "devkit ")

Open the console and enter:

GC. App. View

It will return the Root Node object of the scenario. In the console, you can also conveniently view the subitem of the same node.

# Engineering Structure

A basic devkit project structure is as follows:

.
── Manifest. JSON
── SDK->/path/to/devkit/SDK
── Resources/
── SRC
── Application. js

The significance of the existence of various directories/files has been discussed in the previous section.

Let's talk about the game list file 'manifest. JSON, which can contain any number of configuration information in JSON format. A typical configuration file contains the program id hash code, name, and configuration information in the device screen direction.

This file is automatically generated by 'basic' or edited manually.

{
"Appid": "abcdefghijklmnopqrstuvwxyz012345 ",
"Shortname": "whackthatmole ",
"Title": "Whack-that-Mole! ",
"Supportedorientations ":[
"Portrait"
]
}

# Game process

Before going into the moles, let's take a look at the calling process of the entire program.

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/game-flow.png "devkit ")

First, the devkit engine initializes the environment and calls the program entry './src/application. js' file under the project directory. It initializes the screen.

The program uses the view stack to press in and pop up the game screen. after entering the game, the title view will be pushed into the attempt stack. At this time, the graphics will be displayed on the screen and the user will wait for input to start the game, this title view is defined in '. /src/titlescreen. js' file.

When you touch the 'Play' button, the game view is pushed into our view stack. The game view is responsible for setting game resources and game interfaces, and then playing and ending the game. It is defined in the './src/gamescreen. js' file.

When the game ends, the user's score is displayed on the screen, and the game waits until the user inputs. After a touch event is received, the game tries to pop up the attempt stack and return it to the title view. Then, the game continues to wait for user input to start the game.

# Game structure

The complete project structure is as follows:

.
── Manifest. JSON
── SDK->/path/to/Basil/SDK
── Resources
│ ── Images
│ ── Hole_back.png
│ ── Hole_front.png
│ ── Icon.png
│ ── Mole_hit.png
│ ── Mole_normal.png
│ ── Title_screen.png
│ ── Sounds
│ ├ ── Effect
│ ── Whwhack──
│ ── Music
│ └ ── Levelmusic.pdf
── SRC
── Application. js
├ ── Gamescreen. js
── Molehill. js
├ ── Titlescreen. js
── Soundcontroller. js

The game logic is in the './src' directory. Now let's take a look at it.

Once devkit is initialized, the game starts with './src/application. js. In moles, this file is short and small. It serves to initialize the title view and game view, and process events and guide the game.

/*
* The main game program. All codes will start from here.
*/

// Import the devkit Module
Import device;
Import UI. stackview as stackview;
// Import the User Module
Import SRC. titlescreen as titlescreen;
Import SRC. gamescreen as gamescreen;
Import SRC. soundcontroller as soundcontroller;

/* The program inherits from GC. Application
* When the game is running, it is used for export and instantiation.
*/
Exports = Class (GC. Application, function (){

/* Run the command before the resource is loaded after the engine is created.
*/
This. initui = function (){
VaR titlescreen = new titlescreen (),
Gamescreen = new gamescreen ();

This. View. style. backgroundcolor = '#30b040 ';

// Add a new stackview class to the root of the attempt in the scenario
VaR rootview = new stackview ({
Superview: This,
X: device. width/2-160,
Y: device. Height/2-240,
Width: 320,
Height: 480,
Clip: True,
Backgroundcolor: '# 37b34a'
});

Rootview. Push (titlescreen );

VaR sound = soundcontroller. getsound ();

/* Listen to the start button event in the title view.
* Hide the title view, display the game view, and then trigger a custom event in the game view.
*/
Titlescreen. On ('titlescreen: start', function (){
Sound. Play ('levelmusic ');
Rootview. Push (gamescreen );
Gamescreen. emit ('app: start ');
});

/* When the game view sends a game end event, the title is displayed as an attempt to allow the user to play the game again
*/
Gamescreen. On ('gamescreen: end', function (){
Sound. Stop ('levelmusic ');
Rootview. Pop ();
});
};

/* Load the resource file and run it.
*/
This. launchui = function (){};
});

At the beginning of the code, we use 'import' to import two modules of the devkit engine and three custom modules.

// Import the devkit Module
Import device;
Import UI. stackview as stackview;
// Import the User Module
Import SRC. titlescreen as titlescreen;
Import SRC. gamescreen as gamescreen;
Import SRC. soundcontroller as soundcontroller;

Note that 'application. the JS 'file itself is also a module that uses the 'class' keyword to inherit from the 'gc. application class. This new class is defined as an 'export' object. When our program is instantiated, it will be assigned to the global attribute 'gc. APP, And you can access it anywhere in the project code. Since we only need one program in the game, we can regard it as a singleton.

In the class definition function of the program, we can use the 'eas' keyword to reference this class object. A simple but runable 'application. js' looks like this:

The 'device' module contains information about the physical devices that run the game. We can use it to obtain information about the browser or even prototype applications, depending on how the game runs.

Exports = Class (GC. Application, function (){
// Define the class here ..
// This === GC. app // => true
});

The 'gc. application' class is special. It has two callback functions: 'initui 'and 'launchui'. They will check the UI and run it when they are ready.

The 'initui 'function runs after the devkit engine is created and the scene image is ready. If you define a splash or load screen, the 'launchuis 'function will be removed after execution.

GC devkit Quick Start-game Overview (2) http://www.cnblogs.com/hangxin1940/archive/2013/04/11/3015553.html