Page 1 of 1

Creating a point flash like bejeweled 2

#1 stayscrisp  Icon User is offline

  • フカユ
  • member icon

Reputation: 994
  • View blog
  • Posts: 4,158
  • Joined: 14-February 08

Posted 14 June 2009 - 01:24 PM

I decided to write this tutorial after taking a break from writing the second part of my Beginning SDL tutorial.

If you look at a lot of flash games they have something where whenever you hit something to get points a flash of points pops up. This is an excellent effect and really adds some flair to your flash games. I use this a lot and decided to make it into a reusable class.

A great example of it in use is bejeweled 2, when you connect some gems a burst of points is created check it out http://www.vx4.com/p...bejeweled2.html.

So after doing this I thought I'd share it with all you budding flash game developers :)

So here it is

This class will create the text and sprite needed and then remove itself once done, very efficient and very cool.

This is quite a small class but we still need some imports so we'll do that now, create your PointFlash.as and add this code:

package {
	   
	   import flash.display.*;
	   import flash.events.*;
	   import flash.text.*;
	   import flash.utils.Timer;



The effect itself will animate but it is still classed as a sprite because it doesn't use multiple frames, instead the class will increase the size and alpha of the sprite each time step.

now we will add some static constants to set the font,size and colour:

public class PointFlash extends sprite {
		  
		   static const fontFace:String = "Arial";
		   static const fontSize:int = 20;
		   static const fontBold:Boolean = true;
		   static const fontColour:Number = 0xFFFFFF;



We can now create some constants that control the animation, first we will create animSteps this is the amount of steps during the animation time so it controls the smoothness of the animation. Then we will create animStepTime which controls the time between steps, for example 10 steps with 50 milliseconds between them takes 500 milliseconds, 20 steps at 25 milliseconds also takes 500 milliseconds but has twice as many steps for smoother animation.

static const animSteps:int = 10;
static const animStepTime = 50;



The size of the sprite changes during the animation, we will set a few more constants for these.

static startScale:Number = 0;
static endScale:Number = 2.0;



Next we will create some veriables to hold the references to the items in the class, we need a textField, Sprite, a reference to the stage or movie clip where the pointFlash will be placed and also a timer object.

private var tField:TextField;
private var flashSprite:Sprite;
private var parentMC:MovieClip;
private var animTimer:Timer;



Ok then, not too difficult so far then. Next we will write the function for the PointFlash, the function will create the PointFlash and accept some parameters, these parameters will be the location of the effect and the text to display.

So the first parameter will be a movieclip, this will be a reference to the stage or another movieclip that you want to place the effect.

public function PointFlash(mc:MovieClip, pts:Object, x,y:Number) {



OK now lets write the innards of the function, its pretty self explanatory to start with, we will initialize some values using our previously set constants and some new values.

var tFormat:TextFormat = new TextFormat();
tFormat.font = fontFace;
tFormat.size = fontSize;
tFormat.bold = fontBold;
tFormat.color = fontColour;
tFormat.align = "center";



No explanation needed there I don't think, so lets create the textField itself. We will set selectable to false and also use embedded fonts instead of system fonts, this is because we want to play with the transparency. To center the text we will set the autoSize of the field to textFieldAutoSize.CENTER. also we will set the x and y properties to negative half of the height and width. THis puts the center at 0,0.

tField = new TextField();
tField.embedFonts = true;
tFIeld.selectable = false;
tField.defaultTextFormat = tFormat;
tFIeld.autoSize = textFIeldAutoSize.CENTER;
tFIeld.text = String(pts);
tField.x = -(tField.width/2);
tFIeld.y = -(tFIeld.height/2);



Again nothing to difficult there, now we are going to create the sprite itself, the sprite holds the text and is the main display object. We will set the location to the x and y values that are passed in as parameters, set scale to the startScale constant, set alpha to 0 and then add the sprite to the movieclip.

fSprite = new Sprite();
fSprite.x = x;
fSprite.y = y;
fSprite.scaleX = startScale;
fSprite.scaleY = startScale;
fSprite.alpha = 0;
fSprite.addChild(tFIeld);
parentMC = mc;
parentMC.addChild(fSprite);



Ok so that is basically it for the creation of the sprite, now we need to animate it to make it do something and look cool. All we will basically do is create a timer passing in out animSteps and animStepTIme values, then each step we will call a new function we are about to create called rescaleObj. Once the timer is complete we will use another function we are about to create called removeObj.

animTimer = new Timer(animStepTime,animSteps);
animTimer.addEventListener(TimerEvent.TIMER, rescaleObj);
animTimer.addEventLIstener(TimerEvent.TIMER_COMPLETE, removeObj);
animTimer.start();

}



now lets create the rescaleObj function:

public function rescaleObj(event:TimerEvent) {
	 
	  var percentDone:Number = event.target.currentCount/animSteps;
	  fSprite.scaleX = (1.0 - percentDone)*startScale + percentDone*endScale;
	  fSprite.scaleY = (1.0 - percentDone)*startScale + percentDone*endScale;
	  fSprite.alpha = 1.0 - percentDone;
}



Ok there's our animation done now we need the object to remove itself, we will create the removeObj function now:

public function removeBurst(event:TimerEvent) {
	  fSprite.removeChild(tField);
	  parentMC.removeChild(fSprite);
	  tField = null;
	  fSprite = null;
	  delete this;
}



Ok thats basically it, the class is finished, one thing you will need to do is to adda font to the library, this is because we are using embedded fonts, To do this simply click the library's drop down menu and choose new font, choose your font and name it whatever you like, then right click your new font and choose linkage then export for actionscript.

Now you can add the class to your project, I won't go into detail about how to add files to your project, I'm sure you already know that.

A PointFlash can be used with one line of code now, for example

var pf:PointFlash = new PointFlash(this,100,50,75)  



This uses the object as the movieclip to draw to, it displays the number 100 and it is at locations 50 and 75.

I am currently making a C++ SDL version of this class and I will definitely share it once finished :)

Thanks for reading and feel free to ask me any questions about the tutorial.

Is This A Good Question/Topic? 0
  • +

Replies To: Creating a point flash like bejeweled 2

#2 Guest_firejerm*


Reputation:

Posted 16 March 2010 - 04:28 AM

Great TUT! easy to follow, but would there be a way to code this on the timeline instead? i tried but got an error about pacages not allowed in timeline.

also do you know where i can find a tut on how to make match 3+ games like bejeweled?
thnx

lol my captcha was: khaaaan!
Was This Post Helpful? 0

#3 stayscrisp  Icon User is offline

  • フカユ
  • member icon

Reputation: 994
  • View blog
  • Posts: 4,158
  • Joined: 14-February 08

Posted 21 March 2010 - 12:03 PM

Hi

Doing this kind of thing on the timeline completely misses the point, this class is reusable in any game you make as long as your flash knows where it is located. Which means you can create this effect with the 2 lines of code shown in any game you make. This is the basis of reusable object-oriented code and you would do well to appreciate that.

I found that writing down the rules and steps you expect a game to take and then trying to break them up into objects and functions is a great way to learn, once you can do this effectively then you can make almost any game, try to do this with bejewelled and you will learn a lot.

I'm glad my tutorial helped you :)
Was This Post Helpful? 0
  • +
  • -

#4 Guest_Daniel*


Reputation:

Posted 04 July 2010 - 12:15 PM

Hello,

I am in the need to code a bejeweled game in flash. Are you interested in selling your source code to me? If it is the case, please contact me at daniel (at) iguanacero (dot) com

Thank you for your great tutorial!

Daniel
Was This Post Helpful? 0

#5 Guest_Christian*


Reputation:

Posted 23 September 2010 - 04:19 PM

Sorry man, but this script has got soooooooooo many errors in it. I copied it down line for line, and AS3 throws 1200 fits. Some of the errors are:

fSprite = new Sprite();
should be
var fSprite = new Sprite();
same with
tField = new TextField();
should be
var tField = new TextField();

I don't know why there are variables named tFIeld with a capitol I.

static startScale:Number = 0;
static endScale:Number = 2.0;
should be
static var startScale:Number = 0;
static var endScale:Number = 2.0;

this addEventListener has a capitol I as well:
animTimer.addEventLIstener(TimerEvent.TIMER_COMPLETE, removeObj);
and it's referring to nothing because you made:
public function removeBurst(event:TimerEvent) {}

in the functions:
public function rescaleObj(event:TimerEvent) {}
public function removeObj(event:TimerEvent) {}
you make calls to fSprite and tField, but because they were created in:
public function PointFlash(mc:MovieClip, pts:Object, x,y:Number) {}
they are private and cannot be referred to outside of that function. So they should go where you defined:
private var tField:TextField;
private var flashSprite:Sprite;
private var parentMC:MovieClip;
private var animTimer:Timer;

which it seems like you did, but those variables are private so the functions aren't recognizing them not to mention that you refer to:
private var flashSprite:Sprite;
as:
fSprite
later in your code. Those should look like:
public var tField:TextField;
public var fSprite:Sprite;
public var parentMC:MovieClip;
public var animTimer:Timer;

also on your:
public class PointFlash extends sprite {}
sprite needs to be capitalized to Sprite.

on:
static const animStepTime = 50;
it's missing the :int
static const animStepTime:int = 50;

oh, and finally:
tField.autoSize = textFieldAutoSize.CENTER;
textFieldAutoSize needs to have the T capitalized to:
tField.autoSize = TextFieldAutoSize.CENTER;

and when I've gone through all your code and fixed everything, I added a movieclip strait to my stage, gave it an instance name of "thing" and did this code on my separate actions layer:
import PointFlash;
var pf:PointFlash = new PointFlash(thing,100,0,0);
the x and y are 0 because I made "thing" the width and height of the stage with the registration point in the middle. The only problem is that nothing happens.

But I like your idea! :]

Was This Post Helpful? 0

#6 stayscrisp  Icon User is offline

  • フカユ
  • member icon

Reputation: 994
  • View blog
  • Posts: 4,158
  • Joined: 14-February 08

Posted 24 September 2010 - 03:51 AM

Hi, I think you have typed this out wrong to be getting so many errors. I have noticed the capital I in some variable names but that is something that is easily remedied and nothing to really worry about.

As for when you say I cannot use tField and fSprite because they were created inside a function is not true because I have declared them outside of a function, which is why I don't need to add their type again in the function. No error there. It doesn't matter that they are private as they are part of this class meaning they are private to this class.

The reason it is not doing anything for you is that you have to also create a font on your stage that the code refers to.

Sorry this gave you issues but I don't really count some accidental capitalization as an error, but thanks for pointing out some other issues.

This post has been edited by stayscrisp: 24 September 2010 - 04:15 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1