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