Simple OpenGL ES in Android

Penulis oleh Fajar Purwo Nugroho.


Hai, pertama2 kenalan dulu yak..

gw fajar, designer di studioindependent..

designer kok nulis artikel ttg programing?

gpp dong, menurut steve jobs sih gini  “tak ada perbedaan antara seorang seniman dengan ilmuwan atau enginer”

nah sah2 aja dong gw nulis ttg programing, hehehe..

back to topic..

berhubung ini tulisan pertama gw, mohon maaf nih kalo banyak salah2.. *maklum otodidak

ok, kita mulai aja langsung..

buat yang blm pernah develop aplikasi di android bisa dilengkapi dulu

mungkin tool2 yang mau di pakai seperti :

1. Android SDK

2. Eclipse IDE For Java Developer

kalo tools di atas dah lengkap, dan eclipse dah keinstal jgn lupa bwt instal ADT Plugin (cek lengkapnya di sini)

kalo dah ke install smua, jgn lupa buat setting android SDKnya..

lewat window > preferences > android

browse ke lokasi android-sdk berada..

sekarang kita buat emulatornya, lewat window > android SDK and AVD Manager..

di bagian Virtual Devices klik tombol New lalu setting nama emulatornya, Target android platformnya, dan SD card sizenya..

klik finish kalo dah ok..

*dengan asumsi dah lengkap toolsnya, sekarang kita coba buat bikin aplikasi android..

urutannya File > New > Android Project, nanti bakal muncul windows kyk gini..

kita tinggal isi project name, nentuin target SDK androidnya (kita pake yang platform 1.6)

dibagian bawah di isi juga application name (nama dari aplikasi yang mau kita buat),

package name (kita isi com.android.opengl)

lalu activity (kita isi dengan MainActivity)..

kalo dah lengkap klik finish, otomatis akan terbuat project baru..

buat yang udah pernah develop applikasi java, susunan projectnya mungkin udah biasa..

tp buat yg blm coba di biasakan😛

gw ga bahas itu untuk saat ini, takutnya terlalu panjang lebar..

sekarang kita cek di folder src, di dalemnya udah ada package yg kita buat tadi..

com.android.opengl dan didalem package itu ada class yg dah kita buat MainActivity.java

kalo class itu dibuka isinya bakal kyk gini ..


package com.android.opengl;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
    }
}

perhatiian kode setContentView(R.layout.main),

code itu digunain buat manggil layout yang mau kita gunain di aplikasi..

kita ga gunain layout,

tp kita buat layout sendiri dengan meng-inheritance class

yang namanya GLSurfaceView..


package com.android.opengl;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */

    private VortexView _vortexView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        _vortexView = new VortexView(this);
        setContentView(_vortexView);

    }
 }

kalo ada error, diemin dlu..

itu error karena class VortexView belum terdefinisi..

sekarang kita coba buat class VortexView..

urutannya File > New > Class, nanti akan muncul seperti ini :

kita isiin di name dengan VortexView, dan super classnya android.opengl.GLSurfaceView

lalu finish..

class VortexView dah kebuat, sekarang tambahin untuk constructornya..

di dalem class VortextView :


public VortexView(Context context) {
    super(context);
}

GLSurfaceView itu digunain untuk mengatur object gambar yang akan kita buat..

sekarang kita tambahin object baru dari class VortexRender..


package com.android.opengl;

import android.content.Context;
import android.opengl.GLSurfaceView;
import android.view.MotionEvent;

public class VortexView extends GLSurfaceView {

    private VortexRenderer _renderer;

    public VortexView(Context context) {
        super(context);
        _renderer = new VortexRenderer();
        setRenderer(_renderer);

    }
}

VortexRenderer ini akan kita gunain buat openGL biar ngrender frame yang kita buat nanti..

sekarang kita lanjutin buat bikin class VortexRenderernya :


package com.android.opengl;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLSurfaceView;

public class VortexRenderer implements GLSurfaceView.Renderer {

    private float _red = 0.9f;
    private float _green = 0.2f;
    private float _blue = 0.5f;

    public void onDrawFrame(GL10 gl) {
        gl.glClearColor(_red, _green, _blue, 1.0f);
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
    }

    public void onSurfaceChanged(GL10 gl, int width, int height) {
        gl.glViewport(0, 0, width, height);
    }

    public void onSurfaceCreated(GL10 gl, EGLConfig config) {

    }

}

di class VortexRenderer ini kita mengimplements GLSurfaceView.Renderer..

yang didlmnya terdapat 3 fungsi bawaan yaitu onDrawFrame, onSurfaceCreated dan onSurfaceChange..

onSurfaceCreated dijalankan ketika permukaan layar terbentuk..

onSurfaceChange dijalankan ketika orientationnya berubah misal dari portrait ke landscape, atau sebaliknya..

onDrawFrame dijalankan setiap kali kita mendraw tampilan..

coba perhatikan pada code dibawah ini :

 gl.glClearColor(_red, _green, _blue, 1.0f);

 gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

gl.glClearColor() kita gunain buat ngbuat warna yang kita mau..

gl.glClear() kita gunain buat ngbersihin cache warna yang sebelumnya dibuat..
sekarang coba kita jalanin..

caranya klik kanan di project lalu run as > android application

nanti akan kebuka otomatis emulator androidnya (kalo sudah bikin, kalo belum coba tengok ke atas yah)

aplikasi akan berjalan dengan nampilin layar dengan warnya yang udah kita buat tadi..

sekarang kita coba tambahin code ini di VortexRender :


public void setColor(float r, float g, float b) {
    _red = r;
    _green = g;
    _blue = b;
}

lalu tambahin code berikut di VortexView :


public boolean onTouchEvent(final MotionEvent event) {
    queueEvent(new Runnable() {
        public void run() {
            _renderer.setColor(event.getX() / getWidth(), event.getY() / getHeight(), 1.0f);
        }
    });
    return true;
}

apa sih yang kita tambahin tadi?

ok gw kasi penjelasan dikit..

kita akan coba buat ganti2 warna layar ketika layar androidnya di sentuh..

di VortexView tadi kita buat method yaitu onTouchEvent yang berjalan ketika akan event touch pada layar..

method ini akan memanggil method setColor yang ada di VortexRender..

event.getX()

event.getY()

coba perhatikan pada saat setColor di panggil, ada 2 code di atas..

yang berfungsi buat ngambil posisi x dan y ketika layar di touch..

warnanya akan berubah sesuai dengan posisi ( x, y ) saat kita melakukan touch pada layar..

coba kita jalankan lagi aplikasinya, dan sentuh pada layarnya dengan posisi ( x, y) yang berbeda-beda..

yah kyknya cukup segini perkenalan dengan openGL di android..

kalo ada kesempatan lagi gw bakal tambahin lg..

oh ya ini source code untuk coba2 download here

3 comments

  1. fajar · May 3, 2011

    Saya sekarang juga sedang belajar android tapi masih pakai flash.
    yang paling sulit adalah menemukan hubungan antara touch event/gesture dan object 3D yang ternyata tidak mensuport event buat itu :((.

  2. thestudioindependent · May 3, 2011

    wah mantap tuh om..
    pake adobe air ya om?

  3. Pingback: Pong Droid Series – Part 1 « Thestudioindependent's Blog

Comments are closed.