GC devkit Quick Start-game Overview (2)

Connect to http://www.cnblogs.com/hangxin1940/archive/2013/04/11/3011555.html

# Create a screen view

After the screen view class is imported, We Will instantiate It In The 'initui 'function. Then, the game engine is ready.

VaR titlescreen = new titlescreen (),
Gamescreen = new gamescreen ();

The subsequent content will detail the construction of the screen view.

After the game engine creates a scenario, it is stored in the root node of 'gc. App. view. Any 'view' appended to the root node will be displayed on the screen, and the root node view is somewhat special. It is 'ui. stackview instance, 'ui. stackview is 'ui. the Child class of view. Its other function is to press and pop up the view stack and convert it accordingly.

There are also some sound-relatedCode, We will see detailed descriptions at the end. The 'soundcontroller' module returns a 'audiomanager' singleton object. When we go to the game view, it plays the level music.

# Event Management

In the event processing code, we listened to the game start and end events in two screen views and managed the 'stackview'

Titlescreen. On ('titlescreen: start', function (){
//...
GC. App. View. Push (gamescreen );
Gamescreen. emit ('app: start ');
});

Gamescreen. On ('gamescreen: end', function (){
//...
GC. App. View. Pop ();
});

After receiving the game start event, the game view will be pushed into the 'rootview' view stack. There is no need to delete the title view that already exists and tries to stack, this is because the game view is visible after the stack is pushed to the top. By default, when you press another view into the view stack, there will be a horizontal scroll animation, of course, you can also disable the animation. The following uses the title view to view the entireProgramEvent process details.

# Game waiting status: 'titlescreen. js'

The title view is an instance of the 'titlescreen' class '. /src/titlescreen. the JS file is defined in '. /src/application. js' is instantiated once and added to the root book graph, which exists throughout the lifecycle.

# View profiling

The view structure of the 'titlescreen' class is relatively simple. An image fills the background and is placed in the center of the background and invisible. It is used as the 'Play' button. This button detects input events, sends an event to the main program, and notifies the user that they are ready to start the game. This class is analyzed as follows:

Import UI. view;
Import UI. imageview;

Exports = Class (ui. imageview, function (Supr ){
This. init = function (OPTs ){
Opts = Merge (OPTs ,{
X: 0,
Y: 0,
Image: "Resources/images/title_screen.png"
});

Supr (this, 'init ', [opts]);

VaR startbutton = new UI. View ({
Superview: This,
X: 58,
Y: 313,
Width: 200,
Height: 100
});

Startbutton. On ('inputselect', BIND (this, function (){
This. emit ('titlescreen: start ');
}));
};
});

First, you need to import two modules:

Import UI. view;
Import UI. imageview;

The 'ui. view' class is used as a basic Display object to render elements on the screen. To do this, a view must be appended to the scene of the game (node in the view tree ). A view has style attributes to control how it is rendered to the screen. It can trigger and subscribe to events, or add/delete subviews or parent views.

The 'ui. imageview' class is a subclass of 'ui. view'. Not only does 'ui. view' inherit the attributes of the parent class, but you can also set images in the view.

Now we have imported the dependent modules. Now we can define our 'titlescreen' class.

Exports = Class (ui. imageview, function (Supr ){
This. init = function (OPTs ){
Opts = Merge (OPTs ,{
//...
});

Supr (this, 'init ', [opts]);
};
});

The 'init 'method defined in each class will be executed during instantiation. The 'merge' function is used to merge attributes (like selecting a collection of two sets ), it is used to pass the merged attributes to the constructor. After that, call the 'init' method of the parent class and pass in the merged property object.

The complete 'init 'method is as follows:

This. init = function (OPTs ){
Opts = Merge (OPTs ,{
X: 0,
Y: 0,
Image: "Resources/images/title_screen.png"
});

Supr (this, 'init ', [opts]);

This. Build ();
};

'Title_screen.png 'will be loaded as the 'image' attribute of the 'ui. imageview' class. The 'supr' function passes the current object as a parameter to the parent class for initialization. These three parameters are the current object, the method name of the current object to be called, and an array containing the current object attributes.

# 'Play' button

Remember the 'build 'function called at the end of 'init:

This. Build = function (){
VaR startbutton = new UI. View ({
Superview: This,
X: 58,
Y: 313,
Width: 200,
Height: 100
});

Startbutton. On ('inputselect', BIND (this, function (){
This. emit ('titlescreen: start ');
}));
};

In the title view, an invisible start button is created in the center of the background image. This button view is attached to the current class through the 'superview' attribute, the 'inputselect' listener is used to capture click and touch events. Finally, an event is triggered to notify the title view that the event is running.

# Event Process

Currently, we only see how to capture user input and pass it to the main program. Next we will introduce the event process of the entire game, and then we will see other events.

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

After the program runs successfully and the game is loaded, the user first enters the title view. After you click the start button, the 'titlescreen: start' event will be triggered and captured by the upper-Layer Program. The game view will be loaded there. After that, the user starts the game until 'gamescreen: the end' event is triggered, the upper-Layer Code deletes the game attempt, and then returns to the title view.

# Game: 'gamescreen. js'

The 'gamescreen' class is defined in the './src/gamescreen. js' file. It is also the longest code in the project. Most of the Code is building a view structure, and we have learned some details before. In addition to creating sub-views and game resources, it also defines functions related to the game logic and the method for displaying scores at the end of the game. Later we will see some important code.

# Set the screen

Like the previous Code, some modules will be imported first.

Import animate;
Import device;
Import UI. view;
Import UI. imageview;
Import UI. textview;
Import SRC. molehill as molehill;

We have already talked about 'ui. view', 'ui. imageview', and 'device'. Now we mainly look at other modules.

The role of 'ui. textview' should be easily guessed. It is mainly to display text, in addition to the style tried by the General, you can also set the font size and color of it.

The 'animate' module is mainly used to generate animations for views, objects, and styles. It generates 'complementing animate', and interpolation is performed between moving positions to generate animations. More importantly, it is specially optimized for native devices. We should make good use of this module in the game, rather than manually performing additional computing. We will encounter it in the subsequent code, and we will explain it in detail at that time.

The last module Import Statement is interesting:

Import SRC. molehill as molehill;

The 'src. molehill 'class references the'./src/molehill. js' file in the project directory. In addition to the modules and classes of the devkit engine, we can also customize them and import and reference them by projects. The 'as' statement is used to create an alias for a module or class to facilitate reference without entering a long path.

The same as the 'titlescreen' class, 'gamescreen' is only in 'application. JS is instantiated once. The 'init' function is used to define the size for screen adaptation, fill the green grass with the background, and pass the construction attribute through the 'supr' function as the parent class.

This. init = function (OPTs ){
Opts = Merge (OPTs ,{
X: 0,
Y: 0,
Width: 320,
Height: 480,
Backgroundcolor: '# 37b34a'
});

Supr (this, 'init ', [opts]);

This. Build ();
};

This. Build = function (){
This. On ('app: start', BIND (this, start_game_flow ));

This. _ scoreboard = new UI. textview ({
Superview: This,
X: 0,
Y: 15,
Width: device. Width,
Height: 50,
Autosize: false,
Size: 38,
Verticalalign: 'middle ',
Textalign: 'center ',
Multiline: false,
Color: '# fff'
});

VaR x_offset = 5;
VaR y_offset = 160;
VaR y_pad = 25;
VaR layout = [[1, 0, 1], [0, 1, 0], [1, 0, 1];

This. _ molehills = [];

// Loop, layout grid, first row and then Column
For (var row = 0, Len = layout. length; row