Artificial IntelligenceAI theory, tools and practical applications.

the excitement of chess board game with the simplicity of flash application!
Godpaper is a chess board game framework for Flex. It enables developers to build flash chess games quick and faster, and it offers many helpful code libraries and helpers which speed up tedious tasks in Flex. Godpaper is based on a modular design; meaning that you can implement specific libraries(game AI,data structure,plug-ins) at your discretion – which adds to the speed of the framework. This tutorial will attempt to show you the basics of setting up the framework, including how to build a basic chess game that uses the MVC approach.

Why a Framework?

Frameworks allow for structure in developing applications by providing reusable classes and functions which can reduce development time significantly. Some downsides to frameworks are that they provide unwanted classes, adding code bloat which makes the app harder to navigate.From my perspective, a framework does several things:
it makes it easier to work with complex technologies;
it ties together a bunch of discrete objects/components into something more useful;
it forces the team (or just me) to implement code in a way that promotes consistent coding, fewer bugs, and more flexible applications everyone can easily test and debug the code, even code that they didn't write;
More: http://www.godpaper.com/godpaper/index.php/Framework

Why Godpaper?

Godpaper is a very powerful, well performing framework. While, it is perfect for a beginner (because
of the small learning curve), it’s also perfect for large and demanding flash board games. Godpaper is developed by Knight.zhou and has thorough, easy to understand documentation. Below is a list of reasons of what makes Godpaper a smart framework to use?

A modular collection of AS3 classes based on FLEX4 to simplify common tasks
A starting point for your FLEX applications
A demonstration of FLEX 4 best practices
A sophisticated component of FLEX collaboration project

Why MVC?

For starters, MVC stands for Model, View, Controller. It is a programing pattern used in developing flash board games. This pattern isolates the user interface and back-end (i.e. database interaction from each other. A successful
implementation of this lets developers modify their user interface or back-end with out affecting the other. MVC also increases the flexibly of an app by being able to re-use models or views over again). Below is a description of MVC.

* Model: The model deals with the raw data and database interaction and will contain functions like adding records to a database or selecting specific database records. In Godpaper the model component is a collection of singleton class and value object, and can be included in the controller.
* View: The view deals with displaying the chess piece data and chess board and chess pieces interface controls to the user with.In Godpaper the view could be a chess board, pieces and gasket, view configure data or any other “virtual elements”.
* Controller: The controller acts as the in between of view and model and, as the name suggests,it controls what is sent to the view from the model. In Godpaper, the controller is also the place to manager the game and chess pieces' statement.

An example of a MVC approach would be for a chess piece's movement in turn-based board game.

* It is human turn now!

1. 1. The user interacts with the view by dragging and dropping a chess piece.
2. 2. The controller(chess pieces manager) receives the chess moved data then applied, meanwhile this data has been send the singleton class model and updated in the memory.Then send the turn flag to computer.
3. 3. This turn is updated in the view and displayed to the user.

* It is computer turn now!

1. 1.The game AI thinking and selecting a chess piece to make a move.
2. 2.The controller(chess pieces manager) receives the chess moved data then applied, meanwhile this data has been send the singleton class model and updated in the memory.Then send the turn flag to human.
3. 3.This turn is updated in the view and displayed to the user.

This may sound like a lot of work to do. But, trust me; when you’re working with a large application, being able to reuse models or views saves a great deal of time.

Step 1: Downloading Godpaper

Too start off:

AS3,Stage3d(Starling): https://github.com/yangboz/godpaper/tree/master/TheKnightErrant

FLEX4,MXML: https://github.com/yangboz/godpaper/tree/master/TheRealKnight

Step 2: Installing and Exploring Godpaper

Once you have downloaded "YourChessGameTemplateProject.zip", all you need to do is unzip it, and rename the project and package folder to your application name or code name.
Now that its on your local file system, I’ll explain what all the folders and files are for:

* The src folder stores all the files which make Godpaper work.
+ The assets folder stores all the assets files relevant to the application UI interface. Which
includes the background image of chess board,the skin class of chess piece,thumbnails etc.
+ The controllers folder(com.godpaper.yourpackage) stores all the controllers for the application.
+ The factory folder stores all the factory class for producing chess pieces and gaskets.
+ The managers folder stores all the game and chess pieces' statement which are specific to your application.
+ The vo folder is for chess piece's value object which maintain the functioning of chess movement.
+ The components folder stores all the view components(board,piece,gasket) for the application.
+ The libraries folder stores all the libraries(framework,plug-ins) which are specific to your application.
* The Main.mxml file is the bit that does all the Godpaper magic it also lets the you configure the setting of the system and plug-in implementation.

Step 3: Testing Godpaper

We’ll do a quick test to see if Godpaper is up and running properly. Build and run,you should see the following.

Step 4: Configuring Godpaper.

If you’re up and running, we should finish the configuration. We are starting to configure it specifically for our new flash chess game. If you want to use a 3-by-3 grid with your application, (which in this tutorial we do.) open up src/Main.mxml and set the following variable items to there corresponding values. This code connects to a static class called “BoardConfig” on Godpaper framework swc package.

1. BoardConfig.xLines = 3;//the number of repeated lines in x axis.
2. BoardConfig.yLines = 3;//the number of repeated lines in y axis.
3. BoardConfig.xOffset = 100;//the offset value of each grid in x axis;
4. BoardConfig.yOffset = 100;//the offset value of each grid in y axis;
5. BoardConfig.width = 200;//always equal to (xLines-1)*xOffset.
6. BoardConfig.height = 200;//always equal to (yLines-1)*yOffset.
7. BoardConfig.xScale = 1;//the scale rate of board horizontally.
8. BoardConfig.yScale = 1;//the scale rate of board vertically.
9. BoardConfig.xAdjust = 50;//the adjust value for gasket start point in x axis;
10. BoardConfig.yAdjust = 0;//the adjust value for gasket start point in y axis;

Additionally, you can pre-define some connection conditions(such as TicTacToc,Connect4...) which included the connect direction and the number of connection;

1. BoardConfig.hConnex = true;//enable the horizontal connection.
2. BoardConfig.vConnex = true;//enable the vertical connection.
3. BoardConfig.fdConnex = true;//enable the forward connection.
4. BoardConfig.bdConnex = true;//enable the backward connection.
5. BoardConfig.numConnex = 3;//the number of connection.

Currently, the Godpaper setup will have a default controller(factory) called “YourChessFactory”; you can find this in the src/com/godpaper/yourpackage/business/factory folder. For this tutorial, rename them and corresponding to your package name.

1. PieceConfig.factory=YourChessFactory; //the default chess factory for your reference.
2. PieceConfig.scaleX = 1.0; //the scale rate horizontally.
3. PieceConfig.scaleY = 1.0; //the scale rate vertically.
4. PieceConfig.maxPoolSizeBlue = 5; //the total number of chess pieces(blue side).
5. PieceConfig.maxPoolSizeRed = 5; //the total number of gaskets(red side).
6. PieceConfig.usingDragProxy = true; //display the dragging proxy image.

Godpaper also has a variable items to there corresponding chess gaskets configure values.

1. GasketConfig.borderVisible = true; //you can display this border for debugging.
2. GasketConfig.maxPoolSize = 9; //the total number of gaskets.
3. GasketConfig.tipsVisible = false; //you can display this position tips for debugging.

Don't worry about this series of variables, it is necessary and optional.

Step 5: Create the Chess Board View

The view file(Chess Board) is what the user sees and interacts with, it could be a segment of a page, or the whole page displayed on flash player. To make the chess board view for our tutorial, there is a default file named "YourChessBoard.mxml" in the "yourpackage/view/components" folder. Next, we just need to create our normal chess board, only horizontal and vertical repeated lines, and then you will found that, Degrafa graph framework is easy to learn, easily extend-able and very powerful.
In this stage, the "TicTacToe" chess board reference on Grid Line Repeater,once you have defined the "BoardConfig.xLines/yLines", the default chess board view file(YourChessBoard.mxml) is bindable(flex native bind features) with this variables, actually your chess board already get prepared,simplified,right?
Even more,you can use this powerful tools to draw any geometry graph limited only by your imagination.

Step 6: Create the Chess Pieces Box View

At the first beginning of the type of chess board game,there are two main classes, full information and partial information.Let's explain more detail on this two guys.

• 1.Full information,aka "Chess,Chinese Chess...",to computer programming,at first the board information is full completely.(ApplicationDefault)
• 2.Partial information,aka "TicTacToe,Connect4,Go...",to computer programming,at first the board information is partial,as the game played as the board information increased.(ApplicationDefaulter)
• In our Flex project template files,your can easy to switch the the root name space(ApplicationDefault or ApplicationDefaulter) at "Main.mxml";

To "TicTacToe",the application's name space is "ApplicationDefaulter", in reality game,each player has his chess pieces box,where hold on each player's pieces. As the same way,in our flash chess game, we have two components to represent the box,also you can define a rectangle area where your pieces come up at first glance.
Remember we have defined the number of "PieceConfig.maxPoolSizeBlue/Red" is 5,which decided on each game rules.At the first glance,we can see each pieces' box has 5 pieces inside its "child Area";

components1:PiecesBox id="bluePiecesBox" //Using the default PiecesBox provider by Godpaper framework
left="20" bottom="50" width="100" height="100" //Define the constrained position.
backgroundImage="" //Define the Pieces Box background image.
backgroundImageFillMode="scale" //Define the Pieces Box background image style.
borderVisible="false" //Trim the container's border.
childrenArea="{new Rectangle(20,0,25,25)}"//The birthplace of chess pieces.
type="{DefaultConstants.BLUE}"/>//The type of chess box(Red or Blue).

Now please put this two pieces box on the stage,We have the reality chess board and chess boxes with pieces!
Note:We have the same realistic way to move piece,just dragging some one piece from box,then dropping on the board.

Step 7: Create the YourChessVO Model

Models are important in Godpaper, and it’s considered best practice to use model VO(value object).They are just AS3 classes that contain functions which work with game rules from the chess information. Go ahead and open the YourChessVO.as file
in the com/godpaper/yourpackage/model/vo folder.In this file, created a YourChessVO class, ChessVOBase construct and a function called initialization() with row/column index and flag and identifier.

In the initialization function we are going to use BitBoard functions which speed up chess game rules development times when working with Godpaper and data structure. Essentially, they are simplified functions to create bitboard.This idea inspired me comes from http://chess.dubmun.com/bitboard.html
To be a simple game bitboard(TicTacToe),this is our bitboard at initialization:("." means empty,"B" means blue chess pieces,"R" means red chess pieces);

.	.	.
.	.	.
.	.	.

We can make a representation of anything from this. For example:
1.Occupies:
1.1 spaces occupied_red by red chess pieces:(TicTacToe game rule defined, at first,any empty cell can be filled);

R	.	.
.	.	.
.	.	.

1.2 spaces occupied_blue by blue chess pieces:(TicTacToe game rule defined, at first,any empty cell can be filled);

.	.	.
.	.	.
.	.	B

1.3 So, all_pieces = occupied_blue or occupied_red ;

R	.	.
.	.	.
.	.	B

Notes:There is none attack rules on "TicTacToe";
2.Moves:
2.1 Now occupied_red logical xor with the all_pieces bitboard and we get legal moves for these move_red.

X	.	.
.	.	.
.	.	X

2.2 Now occupied_blue logical xor with the all_pieces bitboard and we get legal moves for these move_blue.

X	.	.
.	.	.
.	.	X

3.Captures:
On this stage,the "TicTacToe" has none capture rules,but you should to apply this game rule to other chess games,such as "Chess", easy logical and this bitboard with opposing piece positions to compute captures.
3.1 captures_blue = moves_blue and occupied_red;
3.2 captures_red = moves_red and occupied_blue;

Step 8: Create the YourChessFactory Controller

To apply all the rules received from the game rules, we put it in a “for-each” loop task which loops through all the virtual elements(chess pieces and gaskets).You may have noticed that we are using Cairngorm3 and Parsley task library files, this provides an convenient and time saving way to write echo statements.Let's explain the detail tasks:

1.createChessPiece task:

public function createChessPiece(position:Point, flag:int=0):IChessPiece

2.createChessGasket task:

public function createChessGasket(position:Point):IChessGasket

3.generateChessVO task:

public function generateChessVO(conductVO:ConductVO):IChessVO

4.generateOmenVO task:

public function generateOmenVO(conductVO:ConductVO):OmenVO

Step 9: Create the YourChessPiecesManager Controller

override protected function blueSideHandler():void

override protected function redSideHandler():void

Step 10: Distribution and monetization