Some Guidance using Canvas

(Secret) #1

Hi guys new user here.

I decided to learn Flashpunk and AS3 today and just finished reading all the tutorials. So as my first “project” I decided to clone a game called Dodger.

Anyway, I wanted to make the enemies have variable size and so I opted to use Canvas instead of Image for the graphic of the Entity, also just to practice programming the other stuff not taught in the tutorials.

I thought I had it but I got stuck with the Canvas itself, I was trying to fill() it with a color but I can’t figure what the correct parameters should be. What exactly is a Rectangle variable type in AS3(I’m new to Actionscript as well) and also the color parameter. Is there an easy way to put the color using some kind of constants instead of manually putting uint in it?

Thank you very much guys :slight_smile:

(JP Mortiboys) #2

Quite simply, a Rectangle is a type comprised of 4 members (x, y, width and height) with provides various methods for calculating rectangle-like stuff.

To fill a Canvas completely with a given colour (red here for example), you would do:

var r:Rectangle = FP.rect;
r.setTo(0, 0, canvas.width, canvas.height);
canvas.fill(r, 0xFF0000);

(By using FP.rect we avoid creating a new object)

For colours, I’m not sure exactly what you mean. Of course you can define constants somewhere and use them:

public class Thing extends Entity {
  public static const MAGENTA:uint = 0xFF00FF;
  public static const CYAN:uint = 0x00FFFF;
  public static const YELLOW:uint = 0xFFFF00;
  private var canvas:Canvas;

  // ... other stuff here

  public function fillWithRandomColour():void {
    var r:Rect = FP.rect;
    r.setTo(0, 0, canvas.width, canvas.height);
    canvas.fill(r, FP.choose(MAGENTA, CYAN, YELLOW));
  }
}

Perhaps you want an easy way to create colours? The FP object has two static methods you will find helpful; getColorHSV and getColorRGB, as well as colorLerp for mixing colours.

Hope this helps

(Secret) #3

Thanks for the info. I actually researched and found out that Rectangle is a built in type in AS3 so I just went ahead and put new Rectangle(...) in the arguments. I’m interested in the FP.rect though and it seems to be more appropriate to use but how exactly is it any different, or how does it not make an object?

Ah yeah, I just didn’t know that you could use the hexadecimal values like that. Thanks. :slight_smile:

Btw I have another question that might not be too related on the original one and more of an AS3 thing. I have overridden the update() method of my World so that I could spawn enemies on a time basis(not even sure if this is the best way to do it). And by doing so I have removed the code that updates the entities. How do I call the original content of the method while also running my spawner code? Or is there any way to do this better? Like maybe put a new entity that is dedicated on spawning like a controller?

(JP Mortiboys) #4

Just remember to call super.update() inside your override function, and it will work fine.

Making the spawner an entity would make sense if you might have several spawners that may each be at different rates, at different locations, and for different types and may each be activated and deactivated independently. If you’ve only got one, just stick it in world.update().

The thing about reusing objects rather than creating them via new is that once created they’ll stick around in memory until the gc feels like cleaning up - if you were creating LOTS of objects every frame (update or render call) it would add up; the memory consumption graph would be a sawtooth pattern and the game might freeze or judder when then gc does its magic. It’s not all that likely though, for small projects, but it’s a good habit to get into.

(Secret) #5

Thank you very much. You’ve been a great help :slight_smile:

(Secret) #6

Oh by the way, I tried to aply the FP.rect but I receive this error:

Error: Call to a possibly undefined method setTo through a reference with static type flash.geom:Rectangle.

on this code:

r.setTo(0,0,dimX,dimY);
(JP Mortiboys) #7

Hmm, maybe setTo is only available on certain versions of the flash runtime? In that case you can just do:

r.x = r.y = 0;
r.width = dimX; r.height = dimY;

Or you could create your own class-level Rectangle member - if you never change its x and y properties you won’t need to set them every time:

public class MyClass extends Entity {
  private var _rect:Rectangle = new Rectangle();

  public function whatever():void {
    _rect.width = canvas.width; _rect.height = canvas.height;
    canvas.fill(_rect, 0xFFF8E7); // Cosmic Latte
  }
}