Skip to content
December 20, 2010 / Daniel Freeman

[Adobe AIR] Dr Android Answers: Circular floor tiles

I’m writing a game where a spinning top moves around a circular area consisting of tiles.  (Each type of tile will have different properties).  I want to arrange the tiles in concentric circles.  How do I make this?  (By the way, I’m looking for a way to write it to the iPhone as well as Android).

Puteri


If I were writing this project, I might consider writing it in Pure ActionScript / AIR for mobile, rather than writing it in two or more Native SDKs.  Furthermore, ActionScript 2D graphics is both feature packed, and easy to use.

Even if you wanted to stick to Native SDKs (for possible reasons of speed and memory efficiency) – you could still generate the tiles using ActionScript, and convert them to image files.

But given that your game consists of primarily one moving object – I think ActionScript/AIR is the way to go.

So, How do you draw a circle?  The standard equation for a circle is:-

x = r Cos(theta),   y = r Sin(theta)

I’m going to use bezier curves to construct the circular segments.  And you mentioned that each tile is made of a different material… this is where features of ActionScript graphics come into their own.  I’m going to use a bitmap fill.

package  {

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

import asfiles.SpinningTopBackground;

public class SpinningTop extends Sprite {

protected static const TO_RADIAN:Number=Math.PI/180;
protected static const RADIUS:Number=16.0;

public function SpinningTop() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

graphics.beginFill(0xffffff);
graphics.drawRect(0,0,384,512);
new SpinningTopBackground(this,384/2,512/2-64);
}

}
}
package asfiles {

	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.filters.BevelFilter;

	public class SpinningTopBackground extends Sprite {

		[Embed(source="materials/bricks.png")]
		protected static const BRICKS:Class;

		[Embed(source="materials/grass.png")]
		protected static const GRASS:Class;

		[Embed(source="materials/metal.png")]
		protected static const METAL:Class;

	protected static const MATERIALS:Array = [BRICKS, METAL, GRASS];
	protected static const OUTLINE:uint = 0x333333;
	protected static const TO_RADIAN:Number=Math.PI/180;
	protected static const RADIUS:Number=40.0;

	public function SpinningTopBackground(screen:Sprite,xx:Number,yy:Number) {
		screen.addChild(this);
		x=xx;y=yy;
		for(var i:int=0;i<3;i++) segment(this,0,i,3);
		for(var j:int=0;j<6;j++) segment(this,1,j,6);
		for(var k:int=0;k<9;k++) segment(this,2,k,9);
		for(var l:int=0;l<14;l++) segment(this,3,l,11);

		filters=[new BevelFilter(1.0)];
	}

	protected function segment(graf:Sprite,i:int,j:int,segs:Number,Material:Class = null):void {
		const st:Number = 12;
		var segangle:Number=360/segs; //Math.pow(3,i+1);
		var coshalf:Number=1/Math.cos(TO_RADIAN*segangle/2);
		var o:Number;
		if (i==0) o=0.0; else o=-TO_RADIAN*20;
		graf.graphics.lineStyle(1,OUTLINE);
		if (!Material) graf.graphics.beginBitmapFill((new MATERIALS[Math.floor(MATERIALS.length*Math.random())]).bitmapData);
		else graf.graphics.beginBitmapFill(new Material().bitmapData);
		graf.graphics.moveTo((st+(i+1)*RADIUS)*Math.sin(o+TO_RADIAN*j*segangle),(st+(i+1)*RADIUS)*Math.cos(o+TO_RADIAN*j*segangle));
		graf.graphics.lineTo((st+i*RADIUS)*Math.sin(o+TO_RADIAN*j*segangle),(st+i*RADIUS)*Math.cos(o+TO_RADIAN*j*segangle));
		graf.graphics.curveTo(coshalf*(st+i*RADIUS)*Math.sin(o+TO_RADIAN*(j+.5)*segangle),coshalf*(st+i*RADIUS)*Math.cos(o+TO_RADIAN*(j+.5)*segangle),(st+i*RADIUS)*Math.sin(o+TO_RADIAN*(j+1)*segangle),(st+i*RADIUS)*Math.cos(o+TO_RADIAN*(j+1)*segangle));
		graf.graphics.lineTo((st+(i+1)*RADIUS)*Math.sin(o+TO_RADIAN*(j+1)*segangle),(st+(i+1)*RADIUS)*Math.cos(o+TO_RADIAN*(j+1)*segangle));
		if (i==0) {
			coshalf=1/Math.cos(TO_RADIAN*segangle/4);
			graf.graphics.curveTo(coshalf*(st+RADIUS)*Math.sin(TO_RADIAN*(j+.75)*segangle),coshalf*(st+RADIUS)*Math.cos(TO_RADIAN*(j+.75)*segangle),(st+RADIUS)*Math.sin(TO_RADIAN*(j+.5)*segangle),(st+RADIUS)*Math.cos(TO_RADIAN*(j+.5)*segangle));
			graf.graphics.curveTo(coshalf*(st+RADIUS)*Math.sin(TO_RADIAN*(j+.25)*segangle),coshalf*(st+RADIUS)*Math.cos(TO_RADIAN*(j+.25)*segangle),(st+RADIUS)*Math.sin(TO_RADIAN*j*segangle),(st+RADIUS)*Math.cos(TO_RADIAN*j*segangle));
		} else graf.graphics.curveTo(coshalf*(st+(i+1)*RADIUS)*Math.sin(o+TO_RADIAN*(j+.5)*segangle),coshalf*(st+(i+1)*RADIUS)*Math.cos(o+TO_RADIAN*(j+.5)*segangle),(st+(i+1)*RADIUS)*Math.sin(o+TO_RADIAN*j*segangle),(st+(i+1)*RADIUS)*Math.cos(o+TO_RADIAN*j*segangle));
	}
}
}

Advertisements

To discuss MadComponents/MC3D, join the Facebook group!

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

%d bloggers like this: