Posts Tagged ‘Casual Game’

Evoland-Logo

I just bought Evoland today and thought I would share my thoughts as it seems like it would link nicely into the project of designing a complex game. The biggest draw to get this game to me was the fact that the game develops as you find chests, it starts out with only one button that’s available for use with black and white pixel graphics and ends up turning into a fully HD world that you can explore. Unlocking these features takes you through the development of games over the years and highlights all the features that we take for granted today, even the story is unlocked in a chest highlighting that games didn’t always have one. The sense of progression you get by unlocking these features and literally changing the world around you is really fulfilling and the game’s captions for each brake the fourth wall constantly. You even swap from 2D to 3D in the game to pass over objects that were flat pixels in 2D but are impassible objects in 3D and vise versa which is a great game play mechanic. Evoland is full of references to numerous RPG’s mainly Final Fantasy, The legend of Zelda, Diablo and Dragons Quest. This is were Evoland seems to fall short it is mainly a game made as an homage to the RPG genera and it’s development and not really a complex RPG itself and can be finished in 4 hours or so. So if your looking for a complex RPG you wont find that here but if your looking for a fun adventure that pays tribute to some of your favorite games I would recommend Evoland it’s a lot of fun just a little on the short side but for the price it’s not that bad and to explore the development of RPG’s I would recommend anyone thinking of designing a game should check it out it may make you think of something you overlooked or give you an idea of what play stile you enjoy most.

Evoland

The final result of my card game can be found here. Please note for some reason it has not uploaded correctly so things that should be hidden are visible (I tried uploading several times).

Evaluation:

I decided to try and make a game based off the Final Fantasy trading card game not released in the west. This involved getting card images and importing a deck of my own, translating them and learning to play. I then spent time doing initial sketches and researched the layouts of existing card games looking for features or displays I could use in my own game.

My biggest challenge was trying to learn flash, but any card tutorials I found were irrelevant or incomplete which lead me to try and create a completely scripted battle. This is what lead me to create a tutorial but due to my lack of knowledge with flash things took a lot longer than they should have and I took the long way of doing things writing 500+ lines of code for most slides. This is why the tutorial is so short.

If I could do this all again I would make a background track for the level, create a better looking menu screen and spend less time translating cards as only a hand full were actually used due to my limitations in coding meaning I could not set up a random draw function like I had hopped. Overall I am pleased with the progress I made learning flash and over coming numerous problems but taking the flash as a product on its own it is far from what I imagined been little more than a 12 slide sideshow were the user has to choose the right options to progress. Though it does manage to demonstrate the type of game I was proposing to make, which is the purpose of the flash. In closing I hope to be able to improve my skills even further in my next flash based project.

While I had my friend test the game he said the buttons weren’t working properly so I re set it and they worked fine. later I discovered the problem:

During the start of your second turn:

Glitch 1

If you click on any of the cards before you draw your cards the buttons will not disappear when the cards move up in the next frame.

Glitch 2

As you can see the button has not disappeared and has now stopped all the other buttons from changing there location on the X axis.

Glitch 3

This is what happens when you select the card closest to the left:

Glitch 4

The only buttons unaffected are the new buttons because they have just been added in this frame.

Glitch 5

I tried to fix this problem by adding an X axis movement to the card buttons but this function did not work:

Code:

c11.addEventListener(MouseEvent.CLICK, moveButton20);

function moveButton20(e:MouseEvent)
{
b15.y = 631.95;
b16.y = 631.95;
b17.y = 631.95;
b18.y = 631.95;
b19.y = 631.95;
b20.y = 631.95;
b21.y = 417.05;
b22.y = 417.05;
b23.y = 631.95;
b24.y = 631.95;
b25.y = 631.95;
b26.y = 631.95;
b27.y = 631.95;
b28.y = 631.95;

b15.x = 7.20;
b16.x = 66.20;
b17.x = 148.50;
b18.x = 207.50;
b19.x = 287.50;
b20.x = 346.50;
b21.x = 431.50;
b22.x = 490.50;
b23.x = 569.25;
b24.x = 628.75;
b25.x = 716.75;
b26.x = 775.75;
}

The  only other solutions I came up with are to try the X axis movement again but make them a separate event or to make them all new buttons like the two that are unaffected on the end and change all the coding for the buttons.

After trying the X axis movement again as a separate function it worked and successfully solved the problem.

Code:

c12.addEventListener(MouseEvent.CLICK, movex1);

function movex1(e:MouseEvent):void
{
b15.x = 7.20;
b16.x = 66.20;
b17.x = 148.50;
b18.x = 207.50;
b19.x = 287.50;
b20.x = 346.50;
b21.x = 431.50;
b22.x = 490.50;
b23.x = 569.25;
b24.x = 628.75;
b25.x = 716.75;
b26.x = 775.75;
}

Here is my card game trough various stages of its development (please click the links of the versions you wish to see and click play flash in full screen to see it better).

Card Game v1  – This was a very basic start with just a background image and the menus sliding function.

Card Game v2 – I started to experiment with making the buttons appear when you click a card (only the card on the far left works).

Code:

import flash.events.MouseEvent;

c1.addEventListener(MouseEvent.CLICK, showButton1);

function showButton1(e:MouseEvent):void
{
trace(“button is clicked”);
b1.alpha = 100;
b2.alpha = 100;
}

The problem with this is that the buttons are just invisible until you click the card so they still function so I decided to try a different approach.

Card Game v3 – To overcome the problem of the buttons been usable because they were just invisible i placed them under the card and created a function that just moved the buttons from behind the card and made them visible when the card was clicked. also when  you clock on another card the previously selected cards buttons move back. I was also given a timer code by my tutor to use in my play time tab which will tell you how many hours minuets and seconds you have been playing.

Code:

import flash.events.MouseEvent;

c1.addEventListener(MouseEvent.CLICK, showButton1);

function showButton1(e:MouseEvent):void
{
trace(“button is clicked”);
b1.alpha = 100;
b2.alpha = 100;
b3.alpha = 0;
b4.alpha = 0;
b5.alpha = 0;
b6.alpha = 0;
b7.alpha = 0;
b8.alpha = 0;
b9.alpha = 0;
b10.alpha = 0;
}

c2.addEventListener(MouseEvent.CLICK, showButton2);

function showButton2(e:MouseEvent):void
{
trace(“button is clicked”);
b1.alpha = 0;
b2.alpha = 0;
b3.alpha = 100;
b4.alpha = 100;
b5.alpha = 0;
b6.alpha = 0;
b7.alpha = 0;
b8.alpha = 0;
b9.alpha = 0;
b10.alpha = 0;
}

c3.addEventListener(MouseEvent.CLICK, showButton3)

function showButton3(e:MouseEvent):void
{
trace(“button is clicked”);
b1.alpha = 0;
b2.alpha = 0;
b3.alpha = 0;
b4.alpha = 0;
b5.alpha = 100;
b6.alpha = 100;
b7.alpha = 0;
b8.alpha = 0;
b9.alpha = 0;
b10.alpha = 0;
}

c4.addEventListener(MouseEvent.CLICK, showButton4)

function showButton4(e:MouseEvent):void
{
trace(“button is clicked”);
b1.alpha = 0;
b2.alpha = 0;
b3.alpha = 0;
b4.alpha = 0;
b5.alpha = 0;
b6.alpha = 0;
b7.alpha = 100;
b8.alpha = 100;
b9.alpha = 0;
b10.alpha = 0;
}

c5.addEventListener(MouseEvent.CLICK, showButton5)

function showButton5(e:MouseEvent):void
{
trace(“button is clicked”);
b1.alpha = 0;
b2.alpha = 0;
b3.alpha = 0;
b4.alpha = 0;
b5.alpha = 0;
b6.alpha = 0;
b7.alpha = 0;
b8.alpha = 0;
b9.alpha = 100;
b10.alpha = 100;
}

c1.addEventListener(MouseEvent.CLICK, moveButton1)

function moveButton1(e:MouseEvent):void
{
b1. y = 417.05
b2. y = 417.05
b3. y = 454.95
b4. y = 454.95
b5. y = 454.95
b6. y = 454.95
b7. y = 454.95
b8. y = 454.95
b9. y = 454.95
b10. y = 454.95
}

c2.addEventListener(MouseEvent.CLICK, moveButton2)

function moveButton2(e:MouseEvent):void
{
b1. y = 454.95
b2. y = 454.95
b3. y = 417.05
b4. y = 417.05
b5. y = 454.95
b6. y = 454.95
b7. y = 454.95
b8. y = 454.95
b9. y = 454.95
b10. y = 454.95
}

c3.addEventListener(MouseEvent.CLICK, moveButton3)

function moveButton3(e:MouseEvent):void
{
b1. y = 454.95
b2. y = 454.95
b3. y = 454.95
b4. y = 454.95
b5. y = 417.05
b6. y = 417.05
b7. y = 454.95
b8. y = 454.95
b9. y = 454.95
b10. y = 454.95
}

c4.addEventListener(MouseEvent.CLICK, moveButton4)

function moveButton4(e:MouseEvent)
{
b1. y = 454.95
b2. y = 454.95
b3. y = 454.95
b4. y = 454.95
b5. y = 454.95
b6. y = 454.95
b7. y = 417.05
b8. y = 417.05
b9. y = 454.95
b10. y = 454.95
}

c5.addEventListener(MouseEvent.CLICK, moveButton5)

function moveButton5(e:MouseEvent)
{
b1. y = 454.95
b2. y = 454.95
b3. y = 454.95
b4. y = 454.95
b5. y = 454.95
b6. y = 454.95
b7. y = 454.95
b8. y = 454.95
b9. y = 417.05
b10. y = 417.05
}

var count:Number = 45;

op_deck.text = String(count);

pl_deck.text = String(count);

Card Game v4 – I then made a little red block on the field (this was a test and would later be changed to a key function), when its clicked it brings a box up which has two options. this is the end turn menu with yes been green and no been red.

Code for button:

st.addEventListener(MouseEvent.CLICK, movest)

function movest(e:MouseEvent)
{
endt. x = 250
endt_n. x = 300
endt_y. x = 440
}

endt_n.addEventListener(MouseEvent.CLICK, moveEndt)

function moveEndt(e:MouseEvent):void
{
endt. x = -428.95
endt_n. x = -428.95
endt_y. x = -428.95
}

endt_y.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);

function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
nextFrame();

endt. x = -428.95
endt_n. x = -428.95
endt_y. x = -428.9
}

Card Game v5 – I then coded the end turn button to the space bar because when I tried to code the the enter key (flashes default action for the button is skip frame, this took priority over the code I added to the button every time). I also added a function that stopped the player trying to just skip through the game by constantly clicking space and skipping to the next frame by moving a message box over the end turn box. the way you will progress is by playing the game and I started by adding the next frame button to the deck to try and simulate drawing a card.

Code for key press:

function pressKey(event:KeyboardEvent):void
{
if (event.keyCode == 32)
{
EnterKeyDown = true;
trace(“working”)
}
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, EndT)

function EndT(event:Event):void
{

if (EnterKeyDown = true)
{
endt.x = 250;
endt_n.x = 300;
endt_y.x = 440;
no.x = 250;
no.y = 168;
}
}

The only problem with this is that the message doesn’t disappear off screen unless you go to the next frame.

Card Game v6 – In this version not much has been added besides aesthetic improvements.

Card Game v7 – This was a big jump from the previous version. I added instructional messages that appear for a few seconds informing the player of what they needed to do during this frame to progress and also added a function that would let you get rid of the message telling you you cannot end your turn by clicking any ware on the stage.

Code for timed massages:

var fl_SecondsToCountDown3:Number = 1;

var fl_CountDownTimerInstance3:Timer = new Timer(1000,fl_SecondsToCountDown);
fl_CountDownTimerInstance3.addEventListener(TimerEvent.TIMER, fl_CountDownTimerHandler3);
fl_CountDownTimerInstance3.start();

function fl_CountDownTimerHandler3(event:TimerEvent):void
{
trace(fl_SecondsToCountDown3 + ” seconds”);
fl_SecondsToCountDown3–;

if (fl_SecondsToCountDown3 == 0)
{
s1. x = 305;
s1. y = 180;
}
}

var fl_SecondsToCountDown4:Number = 5;

var fl_CountDownTimerInstance4:Timer = new Timer(1000,fl_SecondsToCountDown);
fl_CountDownTimerInstance4.addEventListener(TimerEvent.TIMER, fl_CountDownTimerHandler4);
fl_CountDownTimerInstance4.start();

function fl_CountDownTimerHandler4(event:TimerEvent):void
{
trace(fl_SecondsToCountDown4 + ” seconds”);
fl_SecondsToCountDown4–;

if (fl_SecondsToCountDown4 == 0)
{
s1. x = -380;
s1. y = 545;
}
}

Code for clicking stage:

stage.addEventListener(MouseEvent.CLICK, stageclick)

function stageclick (event:MouseEvent):void
{
endt.x = -428.95;
endt_n.x = -428.95;
endt_y.x = -428.95;
no.x = -428.95;
}

While making the instructional messages I decided that I would make more of a tutorial match than the full game due to time constraints and my limited knowledge of the software at this time.

Card Game v8 – I continued to extent the tutorial adding more functions using the code that I have already been using.

Card Game v9 – I continued to extent the tutorial and did minor bug fixes.

Card Game v10 – This version Contains a fix to a big bug mentioned in a separate post.

Card Game v11 – I then finished off the tutorial notes.

Card Game v12 – I added a Menu screen. While looking over the game again I noticed I gave a command which could apply to two cards but you can only do it with one so I’m going to replace the card which you cant use to avoid confusion. also the message that comes up when you click space and cant progress doesn’t apply to all of the turns so this will also be changed.

I took my HUD display sketch and placed it into Photoshop, then worked it up.

Scan0014

 HUDD1

HUDD2

I used the ruler tool to draw gridlines to help me place things evenly in the display.

HUDD3

HUDD4

HUDD5

HUDD6

HUDD7

HUDD8

HUDD9

HUDD10

HUDD11

HUDD12

HUDD13

HUDD14

HUDD15

HUDD16

HUDD17

HUDD18

After researching other digital card games I started to do sketches of Ideas for Icons and the display.

Scan0014

Scan0010

Scan0011

Scan0012

Custom Rules

Posted: December 3, 2012 in Intro To Games Design
Tags: , ,

After playing a few games I decided to make some tweaks to the rules to make the game easier to play and easier to transferee over to a digital format. Here is a list of the changes I decided on:

 

Each player may only summon one forward OR backup per turn.

 

Each player can only play 5 forwards and 5 backups before they have to replace a card in play with the new one you wish to summon.