Memahami konstrain

Pendahuluan

Konstrain (constraints) adalah kondisi dimana jarak antara ke 2 titik selalu sama. Sebagai contoh ketika membuat gerakan piston, struktur tulang (bone), lengan robot dan sebagainya. Untuk lebih jelasnya perhatikan demo berikut : ( drag ujung spine biru, untuk menggerakkan! )

Untuk membuatnya perhatikan langkah berikut :

1. Buatlah sebuah project baru AS3.
   
2. Siapkan 3 buah gambar bertipe PNG sebagai lengan dan sensor (titik)
   
   
3. Pada file main.as, ketikkan kode berikut :
   

package
{
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	/**
	 * ...
	 * @author Wandah
	 */
	public class Main extends Sprite 
	{
		[Embed(source = "bulat.png")]
		private var bmp:Class;	
		[Embed(source = "spine.png")]
		private var bmp1:Class;
		[Embed(source = "spine2.png")]
		private var bmp2:Class;
		
		private var spine_bmp:Bitmap;
		private var spine_bmp2:Bitmap;
		private var spine:MovieClip;
		private var spine2:MovieClip;
		
		private var drag:Boolean = false;
		private var titik_1:MovieClip;
		private var titik_2:MovieClip;
		private var titik_3:MovieClip;
				
		public function Main() 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// atur masing2 elemen jarum1/spine 1 dan jarum2 / spine2
			//spine 2
			spine_bmp2 = new bmp2;
			spine_bmp2.x = -17;
			spine_bmp2.y = -120;
			spine2 = new MovieClip;
			spine2.addChild(spine_bmp2);
			addChild(spine2);		
			//letakkan spine di tengah
			spine2.x = 400;
			spine2.y = 200;
			//spine 1
			spine_bmp = new bmp1;
			spine = new MovieClip;
			spine_bmp.x = -17;
			spine_bmp.y = -110;
			spine.addChild(spine_bmp);
			addChild(spine);
			//letakkan spine di tengah
			spine.x = 400;
			spine.y = 300;
			//titik 1
			var bulat:Bitmap = new bmp;
			bulat.x = -20;
			bulat.y = -20;
			titik_1 = new MovieClip();
			titik_1.addChild(bulat);
			titik_1.x = 400;
			titik_1.y = 300;
			titik_1.alpha = 0;
			addChild(titik_1);
			//titik 2
			bulat = new bmp;
			bulat.x = -20;
			bulat.y = -20;
			titik_2 = new MovieClip();
			titik_2.addChild(bulat);
			titik_2.x = 400;
			titik_2.y = 200;
			titik_2.alpha = 0;
			addChild(titik_2);
			//titik 3
			bulat = new bmp;
			bulat.x = -20;
			bulat.y = -20;
			titik_3 = new MovieClip();
			titik_3.addChild(bulat);
			titik_3.x = 400;
			titik_3.y = 100;
			titik_3.alpha = 0;
			addChild(titik_3);
			//listener untuk titik 3
			titik_3.addEventListener(Event.ENTER_FRAME, gerak);
			//listener untuk mouse
			stage.addEventListener(MouseEvent.MOUSE_DOWN, drag_mouse);
			stage.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
		}
		
		private function stop_drag(e:MouseEvent):void{
			drag = false;
			titik_3.alpha = 0;
			titik_3.x = titik_2.x + 100 * Math.cos((spine2.rotation-90) * Math.PI / 180);
			titik_3.y = titik_2.y + 100 * Math.sin((spine2.rotation-90) * Math.PI / 180);
		}
		
		private function drag_mouse(e:MouseEvent):void{
			//deteksi apakah drag mouse mengenai 
			if (titik_3.hitTestPoint(mouseX, mouseY)){
				drag = true;
				titik_3.alpha = 0.3;
			}
		}
		
		private function constraint(ob1:Object, ob2:Object, jarak:Number, adj:Number):void {
			var adj2:Number = 1-adj;
			var dist_x:Number = ob1.x-ob2.x;
			var dist_y:Number = ob1.y-ob2.y;
			var jarak_titik:Number = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
			var sudut_titik:Number = -Math.atan2(dist_x, dist_y);
			var error:Number = jarak_titik-jarak;
			ob1.x += (error*adj)*Math.sin(sudut_titik);
			ob1.y -= (error*adj)*Math.cos(sudut_titik);
			ob2.x -= (error*adj2)*Math.sin(sudut_titik);
			ob2.y += (error*adj2)*Math.cos(sudut_titik);
		}
		
		private function gerak(e:Event):void{
			if (drag){
				titik_3.x = mouseX;
				titik_3.y = mouseY;			
				constraint(titik_3, titik_2, 100, 0);	
				constraint(titik_2, titik_1, 100, 1);
				//posisi spine
				spine.rotation = rotasi(titik_1, titik_2);
				spine2.x = titik_2.x;
				spine2.y = titik_2.y;
				spine2.rotation = rotasi(titik_2, titik_3);
			}
		}
		
		private function rotasi(ob1:Object, ob2:Object):Number{
			var rad:Number =  -Math.atan2((ob1.x - ob2.x), (ob1.y - ob2.y)); 
			return rad * 180 / Math.PI;
		}				
	}	
}



4. Jalankan aplikasi dengan menekan tombol Ctrl+Enter
   

Penjelasan Kode

	private function constraint(ob1:Object, ob2:Object, jarak:Number, adj:Number):void {
			var adj2:Number = 1-adj;
			var dist_x:Number = ob1.x-ob2.x;
			var dist_y:Number = ob1.y-ob2.y;
			var jarak_titik:Number = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
			var sudut_titik:Number = -Math.atan2(dist_x, dist_y);
			var error:Number = jarak_titik-jarak;
			ob1.x += (error*adj)*Math.sin(sudut_titik);
			ob1.y -= (error*adj)*Math.cos(sudut_titik);
			ob2.x -= (error*adj2)*Math.sin(sudut_titik);
			ob2.y += (error*adj2)*Math.cos(sudut_titik);
		}

Fungsi tersebut digunakan untuk mengukur posisi antara 2 objek dan meletakkannya pada posisi dengan jarak yang selalu sama.Berikut penjelasan masing-masing vartiabel :

• Variabel ob1 digunakan untuk mendefinisikan objek pertama
• Variabel ob2 digunakan untuk mendefinisikan objek kedua
• Variabel jarak untuk mengatur panjang lengan / jarak statis antara ke dua titik
• Variabel adj digunakan untuk mengkondisikan titik pertama, apakah mengalami perubahan posisi atau tidak

	constraint(titik_3, titik_2, 100, 0);	
	constraint(titik_2, titik_1, 100, 1);

Baris pertama digunakan agar titik_3 memiliki posisi yang relatif terhadap titik_2 sedangkan baris ke 2 nilai adj di set menjadi 1 sehingga posisi titik_1 tidak akan berpindah tempat.

function rotasi(ob1:Object, ob2:Object):Number{
	....
}

digunakan untuk mengeset rotasi lengan (spine) agar sesuai dengan posisi titik-titik.

Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon