Christmas Game – Testing Code (part 2)

This weekend I felt that it was important to get a start on the Christmas game we’re going to be making as a group (and mentioned in a previous post). Unfortunately, despite having an idea in mind, we haven’t been shown quite enough coding in Adobe Animate where I was confident I could produce a game with my established knowledge. This meant that I was going to have to do some more digging and testing to see what will work and what won’t. I have sadly come across things that won’t work more than things that do, but I thought it pertinent to make a blog post about what I’ve learned so far.

1. Creating a drag and drop mechanic.

This seemed like a straight-forward process, but what I’ve discovered in the last two days is that there aren’t very many straight-forward resources for ActionScript beginners. This took a lot of piecing together from various sources and guides to get it to work correctly.

First I had to set up a test scene where I could see if the script would work with some very simplistic shapes. I started by creating three basic squares, each a different colour, and converting them to symbols/movie clips.

threesquarestargetred

It was important to remember I needed to declare them as targetred, targetgreen, and targetblue, for later use in the script. I then also needed to have the items that the player would have to match up to the correct squares by dragging and dropping them. I decided to create some coloured circles.

This meant my canvas now had three squares and three circles. It was also important to name the circles their corresponding colours (again for use in the script). This was all I really needed to test out the code and see if it would work the way I needed it to.

I’m not confident I understand every detail of the script, as the explanations weren’t that detailed, but I’ll see if I can explain what most of the parts do.

import flash.events.MouseEvent;

var objectoriginalX: Number;
var objectoriginalY: Number;

I knew that we were going to have to use MouseEvents that are built into Animate, but also that were going to need to know some X and Y values (namely, the original vectors of the circle being picked up). After that, the way to make the circles clickable was to define them as buttons, as well as determine we needed an EventListener for when the object is clicked on and when the object was released.

blue.buttonMode = true;
blue.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
blue.addEventListener(MouseEvent.MOUSE_UP, dropObject);

red.buttonMode = true;
red.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
red.addEventListener(MouseEvent.MOUSE_UP, dropObject);

green.buttonMode = true;
green.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
green.addEventListener(MouseEvent.MOUSE_UP, dropObject);

With those things declared, we could move on to the two MouseEvents we would need for picking up the circle and then dropping it in the correct square – this was why it was important to name the shapes when we made them, so that we could continue to reference them in this script, but also match them up correctly.

function pickupObject(event: MouseEvent): void {
event.target.startDrag();
event.target.parent.addChild(event.target);
objectoriginalX = event.target.x;
objectoriginalY = event.target.y;
}

The above portion of script is the function for picking up the shape. I believe what it does is allow the player to drag the object by establishing the action as an event in the scene. The more important part was how to make sure the shape would be associated with the correct target square. This would be determined in the dropObject function:

function dropObject(event: MouseEvent): void {
event.target.stopDrag();
var matchingTargetName: String = “target” + event.target.name;
var matchingTarget: DisplayObject = getChildByName(matchingTargetName);
if (event.target.dropTarget != null && event.target.dropTarget.parent == matchingTarget) {
event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickupObject);
event.target.removeEventListener(MouseEvent.MOUSE_UP, dropObject);
event.target.buttonMode = false;
event.target.x = matchingTarget.x;
event.target.y = matchingTarget.y;
} else {
event.target.x = objectoriginalX;
event.target.y = objectoriginalY;
}
}

 

From what I can gather, this script is doing a number of things:

  • It is telling the program which circles should be matched up with which squares, using the names and text strings so it can work for all three matches. These are done by the two matchingTarget variables.
  • The if/else statement determines what should happen to the circle when it’s either match up correctly or matched up incorrectly.
    • If it’s matched up correctly, it disables the EventListener that allows the played to pick up or drop the circle, as well as make it non-clickable. It then snaps it to the x and y vectors of the parent square.
    • However, if the circle is not matched correctly, it snaps the circle back to its original x and y vectors, which means the player will have to try again.

All of this seems to work very well.

testinddragandsrop

Despite my best efforts, it took the rest of the weekend to figure out how to create a timer for the game. I thought this would be a rather simple task, but I don’t understand the language as much as I’d like to. I found out that, much like the MouseEvent, there are two built-in timer classes in Flash. My first attempts at making a timer didn’t work the way I needed it to (it would glitch out the game in testing when trying to switch between frames). Therefore, I spent a lengthy amount of time until I found this second option, and even then it’s not completely cooperating.

First, I needed to establish I would be using these build-in classes and that I wanted my new timer to be 5 seconds long until it was game over.

import flash.utils.Timer;
import flash.events.TimerEvent;

var timer: Timer = new Timer(5000, 1);

I then needed to declare my EventListener for later use and actually start my timer when the game window first opens.

timer.addEventListener(TimerEvent.TIMER_COMPLETE, timeUp);
timer.start();

The biggest issue was trying to add a game over screen that would show once the timer reached 0. As much as I tried, I couldn’t figure out a way to display this countdown either in the output console or a dynamic text box without the game glitching and rapidly switching between the two keyframes. However, I knew that the countdown was happening in the background, because it worked when I wrote the following function:

function timeUp(event: TimerEvent): void {
gotoAndStop(5);
}

This extremely simple function told the game that, when the 5 seconds had passed as part of the TimerEvent, the keyframe would switch to the 5th frame (where the game over splash screen sits).

timeline

There was no particular reason I chose the 5th frame on the timeline, it was just easier for me to see the difference between what sat on the 1st frame and where the game over frame was on the timeline.

There has to be a way to call the countdown and display it in a text box, so I will have to ask in class this week. I’ve also found another glitch: when the scene switches to the game over frame, the three circles remain on the canvas rather than disappear like the rest of the assets do. I’m sure this is something to do with the drag and drop script, but I couldn’t find a way to clear the canvas and then move to the 5th frame.

I’m slightly frustrated by this (what I feel to be) lack of progress, but this is likely because we’ve not been shown enough tools to create a fully-fledged game on our own. The resources that are out there for creating games in Flash are quite limited to just what a tutorial might cover. I thought revisiting the Flappy Bird tutorial I’d done previously would help, but the script/build of that game is so intertwined it felt extreme to try picking single pieces out to use.

I will persevere, though, and hopefully have further updates soon!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s