Posts Tagged ‘Final Fantasy Trading Card Game’

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.

Advertisements

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

I bought 58 of the trading cards from eBay and decided to compare there size to other types of playing cards to help me refine the scale.

The Final Fantasy trading cards are much bigger then standard playing cards and cards from the Yu Gi Oh trading card game. I think this is to show off Square Enix’s artwork because most of the Final Fantasy card is picture ware as the Yu Gi Oh card has a small boxed off area for the artwork.

The only cards I owned that were the same size as the Final Fantasy cards where the cards from the Digimon trading card game, which also allow a larger area for artwork.