Monday, August 13, 2012

Creating a Pentomino game using AS3: Part 26

Today we continue working on our Saved Levels browser.

Start by going to saved_levels.as and adding 2 Click event listeners for the btn_previous and btn_next buttons in the constructor, set handlers to anonymous functions that call goPage() methods and pass values currentPage-1 and currentPage+1:

public function saved_levels() 
{
savedLevels = SharedObject.getLocal("myLevels");
btn_back.addEventListener(MouseEvent.CLICK, doBack);
if (savedLevels.data.levels != null) levels = savedLevels.data.levels;
tInfo.text = levels.length + " levels (" + savedLevels.size + "B)";
pages = Math.floor(levels.length / 3) + 1;
goPage(1);
btn_previous.addEventListener(MouseEvent.CLICK, function() { goPage(currentPage - 1) } );
btn_next.addEventListener(MouseEvent.CLICK, function() { goPage(currentPage + 1) } );
}

Now in the goPage() function, in each if...statement that handles level items call a method named countShapes(), pass 2 values as parameters - the first is the reference to the respective level item MovieClip (item1, item2 or item3) and second is the shapes array for the respective level from the levels array:

if (levels[3 * (currentPage-1)] != null) {
item1.alpha = 1;
item1.mouseEnabled = true;
item1.mouseChildren = true;
item1.tTitle.text = levels[3 * (currentPage-1)].name;
countShapes(item1, levels[3 * (currentPage-1)].shapes);
}

if (levels[3 * (currentPage-1)+1] != null) {
item2.alpha = 1;
item2.mouseEnabled = true;
item2.mouseChildren = true;
item2.tTitle.text = levels[3 * (currentPage-1) + 1].name;
countShapes(item2, levels[3 * (currentPage-1) + 1].shapes);
}

if (levels[3 * (currentPage-1)+2] != null) {
item3.alpha = 1;
item3.mouseEnabled = true;
item3.mouseChildren = true;
item3.tTitle.text = levels[3 * (currentPage-1) + 2].name;
countShapes(item3, levels[3 * (currentPage-1) + 2].shapes);
}

The countShapes() function sets each text field's (tShape1 - tShape12) text value to the respective value from array:

private function countShapes(levelItem:MovieClip, shapes:Array):void {
for (var i:int = 1; i <= 12; i++) {
levelItem["tShape" + i].text = shapes[i - 1];
}
}

Now we'll work on the page navigation. We already made the buttons functional by adding two click event listeners in the constructor, but the two buttons should not be available at all times.

The Previous button should only be available when there's a page that we can return to, and the Next button should be only available when there's a page we can continue to.

Go to goPage() function and add this piece of code that handles the page navigation:

// page navigation
btn_previous.alpha = btn_next.alpha = 0;
btn_previous.mouseEnabled = btn_next.mouseEnabled = false;

if (currentPage > 1) {
btn_previous.alpha = 1;
btn_previous.mouseEnabled = true;
}

if (currentPage < pages) {
btn_next.alpha = 1;
btn_next.mouseEnabled = true;
}

Full function code:

private function goPage(pageNum:int):void {
currentPage = pageNum;
tPage.text = "Page " + currentPage + "/" + pages;

// level items
item1.alpha = item2.alpha = item3.alpha = 0;
item1.mouseEnabled = item2.mouseEnabled = item3.mouseEnabled = false;
item1.mouseChildren = item2.mouseChildren = item3.mouseChildren = false;


if (levels[3 * (currentPage-1)] != null) {
item1.alpha = 1;
item1.mouseEnabled = true;
item1.mouseChildren = true;
item1.tTitle.text = levels[3 * (currentPage-1)].name;
countShapes(item1, levels[3 * (currentPage-1)].shapes);
}

if (levels[3 * (currentPage-1)+1] != null) {
item2.alpha = 1;
item2.mouseEnabled = true;
item2.mouseChildren = true;
item2.tTitle.text = levels[3 * (currentPage-1) + 1].name;
countShapes(item2, levels[3 * (currentPage-1) + 1].shapes);
}

if (levels[3 * (currentPage-1)+2] != null) {
item3.alpha = 1;
item3.mouseEnabled = true;
item3.mouseChildren = true;
item3.tTitle.text = levels[3 * (currentPage-1) + 2].name;
countShapes(item3, levels[3 * (currentPage-1) + 2].shapes);
}

// page navigation
btn_previous.alpha = btn_next.alpha = 0;
btn_previous.mouseEnabled = btn_next.mouseEnabled = false;

if (currentPage > 1) {
btn_previous.alpha = 1;
btn_previous.mouseEnabled = true;
}

if (currentPage < pages) {
btn_next.alpha = 1;
btn_next.mouseEnabled = true;
}
}

And that is it for today. We can now browse through pages of saved levels and see some of its info.

Full saved_levels.as code:

package  
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.SharedObject;

/**
 * Open-source pentomino game engine
 * @author Kirill Poletaev
 */

public class saved_levels extends MovieClip
{
private var savedLevels:SharedObject;
private var levels:Array = [];
private var pages:int;
private var currentPage:int;

public function saved_levels() 
{
savedLevels = SharedObject.getLocal("myLevels");
btn_back.addEventListener(MouseEvent.CLICK, doBack);
if (savedLevels.data.levels != null) levels = savedLevels.data.levels;
tInfo.text = levels.length + " levels (" + savedLevels.size + "B)";
pages = Math.floor(levels.length / 3) + 1;
goPage(1);
btn_previous.addEventListener(MouseEvent.CLICK, function() { goPage(currentPage - 1) } );
btn_next.addEventListener(MouseEvent.CLICK, function() { goPage(currentPage + 1) } );
}

private function goPage(pageNum:int):void {
currentPage = pageNum;
tPage.text = "Page " + currentPage + "/" + pages;

// level items
item1.alpha = item2.alpha = item3.alpha = 0;
item1.mouseEnabled = item2.mouseEnabled = item3.mouseEnabled = false;
item1.mouseChildren = item2.mouseChildren = item3.mouseChildren = false;


if (levels[3 * (currentPage-1)] != null) {
item1.alpha = 1;
item1.mouseEnabled = true;
item1.mouseChildren = true;
item1.tTitle.text = levels[3 * (currentPage-1)].name;
countShapes(item1, levels[3 * (currentPage-1)].shapes);
}

if (levels[3 * (currentPage-1)+1] != null) {
item2.alpha = 1;
item2.mouseEnabled = true;
item2.mouseChildren = true;
item2.tTitle.text = levels[3 * (currentPage-1) + 1].name;
countShapes(item2, levels[3 * (currentPage-1) + 1].shapes);
}

if (levels[3 * (currentPage-1)+2] != null) {
item3.alpha = 1;
item3.mouseEnabled = true;
item3.mouseChildren = true;
item3.tTitle.text = levels[3 * (currentPage-1) + 2].name;
countShapes(item3, levels[3 * (currentPage-1) + 2].shapes);
}

// page navigation
btn_previous.alpha = btn_next.alpha = 0;
btn_previous.mouseEnabled = btn_next.mouseEnabled = false;

if (currentPage > 1) {
btn_previous.alpha = 1;
btn_previous.mouseEnabled = true;
}

if (currentPage < pages) {
btn_next.alpha = 1;
btn_next.mouseEnabled = true;
}
}

private function countShapes(levelItem:MovieClip, shapes:Array):void {
for (var i:int = 1; i <= 12; i++) {
levelItem["tShape" + i].text = shapes[i - 1];
}
}

private function doBack(evt:MouseEvent):void {
(root as MovieClip).gotoAndStop(1);
}
}

}

Thanks for reading!

No comments:

Post a Comment