Flex & Degrafa Tic Tac Toe Tutorial Series Introduction

I have started playing around with Degrafa lately and decided to make a set of tutorials about it. This post is going to give an overview of the series. The entire series will show step by step how to create the Tic Tac Toe game featured below. This will be the first series of tutorials built around creating a full application, so if there are pieces that are incoherent let us know. I hope everyone finds some useful information out of them.

The application was created using a couple of libraries, Degrafa which was used for the graphics and Tweener which was used for the small bit of tweening. Another interesting aspect of the the application that will be explained in detail in some of the tutorials of the series is the architecture used for the game. I following the popular MVC (Model-View-Controller) architectural pattern, specifically hashed out by Jon Baker called Easy MVC. Now take a moment find a buddy and play some Tic Tac Toe. Tic Tac Toe Source Code.

Now that you have played with the game a little bit I will give a quick overview of the application. Understand though that this application is in no way perfect and there are always different ways to handle problems (technical or architectural) in Flex. Ok now that I have the small disclaimer out of the way lets look at a couple items.

First I will give a quick overview of the architecture. As mentioned above the architecture is a based on model-view-controller, which is a design pattern to separate the different functional pieces of the application. The three big pieces in our application are going to be the views which show stuff on the screen. In our cases this will be the following:

• Game surface, GameView.mxml - the entire game area
• Game board, GameBoard.mxml - where the game is played which will have 9 game pieces and the grid
• Game grid, GameGrid.mxml - the actually grid
• Game piece, GamePiece.mxml - each piece is a square that is clicked on to show an O or X
• Top toolbar, TopToolbar.mxml - will have the title and the current player info
• Title label, TitleBar.mxml - have the title of the game
• Current player info, PlayerHud.mxml - tells who's turn it is
• Game over popup, GameOverPopup.mxml - simple popup that shows who won the game

Now that may look like a bunch of components but many of them are very simple. These components should modify data by themselves they just react to the data that is kept in the model. In our case a single class GameModel found in GameModel.as. The main piece is the GameController in GameController.as, this will handle all the data processing and set the data in the model to update the views. We also have a couple other items, events, skins, and css. The events take care of telling the controller when something happens that is important such as a button click. The others are to make our game pretty.

All of the graphics for the game are created using Degrafa, which allows us to take advantage of all the graphics capabilities of Flash and Flex but in a much easier way. With Degrafa we can do all our drawing using mxml which makes our lives much much easier for creating complex shapes, fills, and strokes. I recommend before checking out the rest of the tutorials you should take a look at the Degrafa Samples. All the samples have source code and they will give you an idea of the kinds of things that can be done with Degrafa.
To make sure that our application has a nice look and feel I also used Tweener a little bit in the application. The Tweener library always you to tween (animate) objects very easily in actionscript. This is as simple as Tweener.addTween(object, params...). As you noticed above there aren't any fantastic animations but we are going to have Tweener take care of our fading in and out for our shapes.

Lastly I will give you a quick overview of the tutorials that are going to be in the series, they are subject to change of course. I will make sure to keep this list updated with correct links and all as I post them.

Series Outline

1. Basic Interface and Layout - game grid, Degrafa basics
2. Advanced Interface and Layout - game pieces, top toolbar, game over popup
3. Architecture Components - setting up the model, controller, and events
4. Game Code - adding the game smarts to the controller
5. Styling and Skinning - making our game shiny

I hope this gives you a good overview of what to expect for the rest of the tutorial series. If anyone has any questions, concerns, worries, or just plain ole complaints drop us a comment. Also check out the references below to learn more about some of the aspects of the technology used to create the Tic Tac Toe game above.

Edit (30 April 2008)

After some chatter in the comments and discussion I have updated the code to take out the BoardLocked variable. Just wanted to let you all know.