Tutorial – Making Game Pong3D with Flash and Sandy3D

Mau sedikit sharing,kebetulan para programmer StudioIndependent emang lagi belajar sandy3D, trus iseng2 nyoba bikin game pong3D
ya cuman sekedar iseng aja c,pingin tau sandy3D itu kayak apa dan kebetulan ada rencana untuk Project ke 3 menggunakan engine sandy3D

Buat yang blum tau sandy3D itu apa,dan bagaimana bisa di check di websitenya sandy3D

Ok langsung kita mulai aja

First step.
1. Buat langkah pertama,pastikan computer anda menyala,,hehehe..(itu c dah pasti yah) dan jangan lupa segelas kopi ato teh,,biar makin mantaps..hehe..
2. Download library sandy 3D disini, http://sandy.googlecode.com/files/sa…c-3.1.1.tar.gz dan jangan lupa diekstrak. (jika ada versi terbaru silahkan download versi terbarunya )
3. jika sudah, mari kita atur library source pathnya..klik edit->preferences->action script 3.0 settings-> lalu tambahkan entry baru dengan mengklik tanda +, dan arahkan ke direktori dimana anda mengekstrak sandy3D


Second Step.
Nah sekarang kita dah siap untuk bercoding ria..jangan lupa secangkir kopi untuk menemani anda,,hehe..

Buat file script baru,dengan memilih file->new->pilih Action Script,jika sudah kita akan membuat sebuah kelas.

Untuk pertama2 mari kita ketik seperti ini.


package {import flash.display.Sprite;
import flash.events.*;
import flash.ui.*;import sandy.core.Scene3D;
import sandy.core.data.*;
import sandy.core.scenegraph.*;
import sandy.materials.*;
import sandy.materials.attributes.*;
import sandy.primitive.*;
import sandy.bounds.*;
import sandy.core.*;
import sandy.math.*;public class GamePong extends Sprite
{

public function GamePong()
{
}
}
}

Nah code diatas pertama2 kita perlu mengimport yang dibutuhkan oleh sandy3D..jangan lupa di save dan diberi nama yang sama dengan nama kelas.

Untuk selanjutnya kita perlu membuat variable yang dibutuhkan oleh sandy3D,ato bisa dibilang rangka dari sandy3D.


package {import flash.display.Sprite;
import flash.events.*;
import flash.ui.*;import sandy.core.Scene3D;
import sandy.core.data.*;
import sandy.core.scenegraph.*;
import sandy.materials.*;
import sandy.materials.attributes.*;
import sandy.primitive.*;
import sandy.bounds.*;
import sandy.core.*;
import sandy.math.*;public class GamePong extends Sprite
{
var world:Scene3D; //scene3D yang akan menampung semua environment 3D ato bisa dibilang dunianya..
var camera:Camera3D; //dari namanya sudah jelas,klo ini diperuntukan untuk kamera
var grup:Group; //group disini untuk menampung object 3D

public function GamePong()
{
grup = new Group();
camera = new Camera3D(550, 400);//paramaternya adalah lebar dan tinggi,,jadi disini kita atur lebar dan tingginya
camera.x = 0; //atur posisi camera di koordinat x
camera.y = 300; //atur posisi camera di koordinat y
camera.z = -500; //atur posisi camera di koordinat z
camera.lookAt(0,0,0); //pandangan kamera melihat

world = new Scene3D("dunia", this, camera, grup); // paramater yg digunakan adalah nama scene,container,kamera,dan grup

}
}
}

ok,codingan diatas tadi bisa dibilang kita sudah menulis rangka dari sandy3D..nah untuk selanjutnya mari kita tambahkan sebuah box sebagai paddle , bola dan material..material disini gunanya untuk memberikan warna,tekstur ato lighting kepada sebuah objek 3D..
untuk coding dibawah kita akan tambahkan Light dan Line Attributes,juga beberapa event listener.


public class GamePong extends Sprite
{
var world:Scene3D; //scene3D yang akan menampung semua environment 3D ato bisa dibilang dunianya..
var camera:Camera3D; //dari namanya sudah jelas,klo ini diperuntukan untuk kamera
var grup:Group; //group disini untuk menampung object 3D
var box:Box;
var box2:Box;
var bola:Spherepublic function GamePong()
{
grup = new Group();
camera = new Camera3D(550, 400);//paramaternya adalah lebar dan tinggi,,jadi disini kita atur lebar dan tingginya
camera.x = 0; //atur posisi camera di koordinat x
camera.y = 300; //atur posisi camera di koordinat y
camera.z = -500; //atur posisi camera di koordinat z
camera.lookAt(0,0,0); //pandangan kamera melihatworld = new Scene3D("dunia", this, camera, grup); // paramater yg digunakan adalah nama scene,container,kamera,dan grupvar materialAttr:MaterialAttributes = new MaterialAttributes(new LineAttributes( 5, 0x001E3C, 1 ),new LightAttributes( true, 0.1));

var material:Material = new ColorMaterial( 0x0066CC, 1, materialAttr );
material.lightingEnable = true;
var app:Appearance = new Appearance( material );

var materialBoxAtt:MaterialAttributes = new MaterialAttributes(new LineAttributes( 2, 0xE78E54, 0 ),new LightAttributes( true, 0.1));
var material1:Material = new ColorMaterial( 0xF95442, 1, materialBoxAtt );
material1.lightingEnable = true;
var app1:Appearance = new Appearance( material1 );

box = new Box("box", 150, 50, 50);
box.z = -200;
box.appearance = new Appearance(material);
box2 = new Box("box1", 150, 50, 50);
box2.x = 0;
box2.z = 900;
box2.appearance = new Appearance(material);

bola = new Sphere("mySphere", 20, 15, 15);
bola.y = 0;
bola.z = 300;
bola.y = box.y + 20;
bola.appearance = new Appearance( material);

grup.addChild(bola); //kita add ke dalam grup
grup.addChild(box);
grup.addChild(box2);

addEventListener( Event.ENTER_FRAME, enterFrameHandler );

}

public function enterFrameHandler(event : Event):void
{

world.render(); //kita render
}
}

Ok jika sudah,,saatnya kita coba compile,jika berhasil maka hasilnya akan seperti ini

nah biar seru,,mari kita buat agar box pertama bisa kita gerakkan.
untuk disini kita akan mencoba menggerakan dengan mouse..kita buat sebuah fungsi untuk menggerakan box dengan mouse..


private function mouseGerak(event:MouseEvent):void
{
box.x = stage.mouseX - 274; //disini kita akan mengambil titik tengah dari box,agar posisi mouse berada di tengah2 box.
box.z = -(stage.mouseY - 133); //kita ambil titik tengah y..
//dengan begini posisi box akan mengikut posisi mouse
}

jika sudah,,kita tambahkan addEventListener..


stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseGerak);

coba di compile..jika berhasil posisi box akan mengikuti posisi mouse

nah sekarang kita akan coba membuat fungsi untuk menggerakan bola + simple AI + collision..
sebelumnya jangan lupa untuk menambahkan variabel ini


var speedX:Number;
var speedZ:Number;
var bs:BSphere;
var bs2:BSphere;
var bs3:BSphere;
var kena:Boolean = false;
var kenaMusuh:Boolean = false;


private function moveBola():void {
bola.z -= speedZ;
bola.x += speedX;
bola.rotateX += 10;
}
private function checkCollision():void {if (IntersectionMath.intersectionBSphere(bs, bs2) && !kena) // jika bola bertabrakan dengan box pertama,maka pantulkan
{
kena = !kena;
kenaMusuh = !kenaMusuh;
speedZ = -speedZ;
}
if (IntersectionMath.intersectionBSphere(bs, bs3) && kenaMusuh && kena) //jika bola bertabrakan dengan box kedua
{
kena = !kena;
kenaMusuh = !kenaMusuh;
bola.rotateX -= 10;
speedZ = -speedZ;
}
if (bola.x > 400 || bola.x < -400) //jika bola melewati batas kanan..maka pantulkan
{
speedX = -speedX;
}
if (bola.x box2.x) //jika bola dikanan maka gerakkan ke kanan
{
box2.x += 10;
}
}

untuk collision detection,,disini kita menggunakan Bounding Sphere,dan untungnya di sandy3D sudah menyediakan metode intersection antara bounding sphere..

sebelumnya jangan lupa untuk membuat bounding sphere terlebih dahulu..dan mengisi variabel speedX & speedZ.

tambahkan code ini di constructor


speedX = 10;
speedZ = 10;
bs2 = box.boundingSphere;
bs3 = box2.boundingSphere;
bs = bola.boundingSphere;

code diatas akan mengambil Bounding sphere dari object3D.
setelah itu kita panggil metode moveBola dan checkCollision.


public function enterFrameHandler(event : Event):void
{world.render();
moveBola();
checkCollision();
}coba di compile,jika sudah..

selamat anda telah berhasil membuat game pong3D dengan flash dan sandy3D.

nah,untuk mempercantiknya kita bisa memberikan tekstur ke tiap objectnya.

caranya,masukan gambar apa saja yg ingin dijadikan tekstur ke dalam library flash dan export ke action script.

untuk contoh codenya seperti ini


box2.appearance = new Appearance(new BitmapMaterial( new wood(0,0) ) );
box.appearance = new Appearance(new BitmapMaterial( new wood(0,0) ) );
bola.appearance = new Appearance(new BitmapMaterial( new bolaTex(0,0) ) );

dan hasil jadinya adalah seperti ini..

dan ini file swfnya
http://filebin.gamedevid.org/f/1002x.swf

source code lengkapnya

package {import flash.display.Sprite;
import flash.events.*;
import flash.ui.*;import sandy.core.Scene3D;
import sandy.core.data.*;
import sandy.core.scenegraph.*;
import sandy.materials.*;
import sandy.materials.attributes.*;
import sandy.primitive.*;
import sandy.bounds.*;
import sandy.core.*;
import sandy.math.*;public class GamePong extends Sprite {

var world:Scene3D;
var camera:Camera3D;
var grup:Group;
var box:Box;
var box2:Box;
var bola:Sphere;
var speedX:Number;
var speedZ:Number;
var bs:BSphere;
var bs2:BSphere;
var bs3:BSphere;
var kena:Boolean = false;
var kenaMusuh:Boolean = false;

public function GamePong() {
speedX = 10;
speedZ = 5;
grup = new Group();
camera = new Camera3D(550, 400);
camera.x = 0;
camera.y = 300;
camera.z = -500;
camera.lookAt(0,0,0);

world = new Scene3D("dunia", this, camera, grup);

var materialAttr:MaterialAttributes = new MaterialAttributes(new LineAttributes( 5, 0x001E3C, 1 ),new LightAttributes( true, 0.1));

var material:Material = new ColorMaterial( 0x0066CC, 1, materialAttr );
material.lightingEnable = true;
var app:Appearance = new Appearance( material );

var materialBoxAtt:MaterialAttributes = new MaterialAttributes(new LineAttributes( 5, 0x001E3C, 0 ),new LightAttributes( true, 0.1));
var material1:Material = new ColorMaterial( 0xF95442, 1, materialBoxAtt );
material1.lightingEnable = true;
var app1:Appearance = new Appearance( material1 );

box = new Box("box", 150, 50, 50);
box.z = -200;
bs2 = box.boundingSphere;
box.appearance = new Appearance( new BitmapMaterial( new wood(0,0) ) );

box2 = new Box("box1", 150, 50, 50);
box2.appearance = new Appearance( new BitmapMaterial( new wood(0,0) ));
box2.x = 0;
box2.z = 900;
bs3 = box2.boundingSphere;

bola = new Sphere("mySphere", 20, 15, 15);
bs = bola.boundingSphere;
bola.y = 0;
bola.z = 300;

bola.y = box.y + 20;
bola.appearance = new Appearance( new BitmapMaterial( new bolaTex(0,0) ) );

grup.addChild(bola);
grup.addChild(box);
grup.addChild(box2);

addEventListener( Event.ENTER_FRAME, enterFrameHandler );
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseGerak);

}
public function enterFrameHandler(event : Event):void {

world.render();
moveBola();
checkCollision();
}

private function mouseGerak(event:MouseEvent):void {
box.x = stage.mouseX - 274;
box.z = -(stage.mouseY - 133);

}
private function moveBola():void {
bola.z -= speedZ;
bola.x += speedX;
bola.rotateX += 10;
}
private function checkCollision():void {

if (IntersectionMath.intersectionBSphere(bs, bs2) && !kena) {
kena = !kena;
kenaMusuh = !kenaMusuh;
speedZ = -speedZ;
}
if (IntersectionMath.intersectionBSphere(bs, bs3) && kenaMusuh && kena) {
kena = !kena;
kenaMusuh = !kenaMusuh;
bola.rotateX -= 10;
speedZ = -speedZ;
}
if (bola.x > 400 || bola.x < -400) {
speedX = -speedX;
}
if (bola.x box2.x) {
box2.x += 10;
}
}
}
}

yah mudah2an tutorial diatas bermanfaat..
nanti klo ada update terbaru pasti di post lagi.

Penulis : _Javax_

3 comments

  1. Pingback: Let’s Make your own games (Part 1) « Thestudioindependent's Blog
  2. chocorobokun · March 10, 2010

    wogh keren tutorial game pong 3d nya om😀

  3. thestudioindependent · March 10, 2010

    Makasih om.:D

Comments are closed.