lebih jauh kanvas html5

GRAFIKA GAME

Aditya Wikan Mahastamamahas@ukdw.ac.id

UNIV KRISTEN DUTA WACANA | TEKNIK INFORMATIKA – GENAP 1213 v2

4

Kanvas HTML5 Lanjut:

Turunan Primitif Grafika,

Transformasi dan Komposisi

• HTML5 menyediakan fungsi-fungsi native untuk

menggambarkan turunan primitif grafika yang paling

sering digunakan yaitu segi empat dan lingkaran

• HTML5 juga menyediakan fungsi-fungsi manipulasi

TURUNAN PRIMITIF GRAFIKA DI HTML5

• HTML5 juga menyediakan fungsi-fungsi manipulasi

kanvas lainnya seperti transformasi dan komposisi,

yang nanti dapat dimanfaatkan dalam membantu

implementasi game

• Untuk menggambar segi empat pada kanvas HTML5,

digunakan method berikut:

context.fillRect(x, y, width, height);

• Misal:

SEGI EMPAT (RECTANGLE)

• Misal:

context.fillRect(40, 40, 100, 100);

• Untuk menggambar segi empat kosong pada kanvas

HTML5, digunakan method berikut:

context.strokeRect(x, y, width, height);

• Misal:

SEGI EMPAT (RECTANGLE) KOSONG

• Misal:

context.strokeRect(200, 300, 100, 100);

• Ingat bahwa waktu kita menggambar garis, sebelum

menentukan koordinat titik awal dan titik-titik

berikutnya, kita memanggil method:

context.beginPath();

MENGAPA BISA DEMIKIAN?

context.beginPath();

• Sehingga sebenarnya apa yang dilakukan HTML

adalah menggambarkan path-nya terlebih dahulu

(jalur saja, invisible) baru kemudian mewujudkannya

melalui method bertipe stroke untuk menggaris

mengikuti path tersebut, atau bertipe fill untuk

menggaris dan mengisi area bagian dalam path.

• Lingkaran pada HTML5 didefinisikan berbeda dengan

segi empat, yaitu bahwa penggambaran lingkaran

menggunakan method busur, yang sekaligus dapat

digunakan untuk menggambar busur saja dan

LINGKARAN (CIRCLE)

digunakan untuk menggambar busur saja dan

lingkaran

context.arc(x, y, radius, startAngle, endAngle,

anticlockwise);

• startAngle dan endAngle didefinisikan dalam PI

radian, sedang anticlockwise berisi true atau false

• Misal: context.beginPath();

context.arc(230, 90, 50, 0, Math.PI*2, false);

context.closePath();

LINGKARAN (CIRCLE)

Agar membentuk poligon tertutup,context.fill();

Note: To get access to the value of pi in

JavaScript you use the Math object, which

is a special object that allows you to do all

sorts of cool math-based stuff. We’ll be

using it in the future for tasks like generating

random numbers.

Agar membentuk poligon tertutup,

Path harus di-close

• Misal: context.beginPath();

context.arc(230, 90, 50, 0, Math.PI, false);

context.closePath();

SETENGAH LINGKARAN (SEMI CIRCLE)

context.fill();

Kira-kira mulai menggambar

sudut 0 dari sebelah mana?

Bisakah menggambar busurnya

saja?

• Jika ingin menggunakan derajat, harus diubah dulu

ke dalam radian

var derajat = 90;

var radian = derajat * (Math.PI / 180);

DERAJAT KE RADIAN

var radian = derajat * (Math.PI / 180);

context.beginPath();

context.arc(230, 90, 50, 0, radian, false);

context.closePath();

context.fill();

• Style digunakan untuk menentukan warna isian dan

garis. Style harus didefinisikan sebelum mulai

menggambar objek.

STYLE (ISIAN DAN GARIS)

• context.fillStyle = "rgb(255, 0, 0)";

memberi style warna merah pada fill (isian)

• context.strokeStyle = "rgb(0, 0, 255)";

memberi style warna biry pada stroke (garis)

• Misal: context.fillStyle = "rgb(255, 0, 0)";

context.fillRect(40, 40, 100, 100);

context.fillRect(180, 40, 100, 100);

context.fillStyle = "rgb(0, 0, 0)";

STYLE ISIAN

context.fillStyle = "rgb(0, 0, 0)";

context.fillRect(320, 40, 100, 100);

• Misal: context.strokeStyle = "rgb(255, 0, 0)";

context.strokeRect(40, 40, 100, 100

context.strokeRect(180, 40, 100, 100);

context.strokeStyle = "rgb(0, 0, 0)";

STYLE GARIS

context.strokeStyle = "rgb(0, 0, 0)";

context.strokeRect(320, 40, 100, 100);

• Lebar garis juga dapat diatur: context.lineWidth = 5;

context.strokeStyle = "rgb(255, 0, 0)";

context.strokeRect(40, 40, 100, 100

context.strokeRect(180, 40, 100, 100);

LEBAR GARIS

context.strokeRect(180, 40, 100, 100);

context.lineWidth = 20;

context.strokeStyle = "rgb(0, 0, 0)";

context.strokeRect(320, 40, 100, 100);

• Teks juga dapat ditampilkan pada canvas HTML5. Caranya

dengan mendefinisikan dulu teksnya melalui sebuah variabel

string, kemudian set font dan ukuran bila perlu, setelah itu

plot pada kanvas menggunakan method fillText atau

.

TEKS

strokeText.

• Karena menggunakan fill atau stroke, maka style yang dapat

diterapkan pada fill dan stroke berlaku pula pada teks.

var text = “string teks";

context.font = "30px serif“;

context.fillText(text, x, y);

atau

context.strokeText(text, x, y);

• Ukuran font didefinisikan dengan tinggi font dalam

px (piksel) bukan point (pt)

• Nama font dapat menggunakan nama generik (serif,

sans) atau nama font sesungguhnya sesuai yang

TEKS

sans) atau nama font sesungguhnya sesuai yang

tertera pada sistem operasi, misal: Times New

Roman, Arial

• Dapat juga ditambahkan weight atau style fontnya

mengikuti aturan CSS (bold, italic, dsb.)

context.font = “italic 30px serif“;

• Misal: var text = "Hello, World!";

context.font = "italic 60px serif";

context.strokeText(text, 40, 100);

TEKS

• Cara membersihkan kanvas pada HTML5 adalah

menutup sebuah area segi empat dengan method

pembersih

context.clearRect(0, 0, 500, 500);

MEMBERSIHKAN KANVAS

context.clearRect(0, 0, 500, 500);

• Untuk menutup seluas kanvas, dapat digunakan cara

berikut, yaitu memanggil atribut lebar dan tinggi

kanvas:

context.clearRect(0, 0, canvas.width(), canvas.height());

• Sebelumnya, kanvas selalu kita definisikan dengan

ukuran tertentu, tetapi kita juga dapat menggelar

kanvas seluas jendela browser dengan metode set

atribut milik JQuery. Pastikan browser anda

KANVAS MEMENUHI JENDELA

BROWSER

atribut milik JQuery. Pastikan browser anda

mendukungnya.

var canvas = $("#myCanvas");

var context = canvas.get(0).getContext("2d");

canvas.attr("width", $(window).get(0).innerWidth);

canvas.attr("height", $(window).get(0).innerHeight);

context.fillRect(0, 0, canvas.width(), canvas.height());

• Kanvas HTML5 memiliki kemampuan untuk

menyimpan perubahan atribut yang dilakukan

hingga baris sebelumnya, kemudian memulihkannya

kembali saat dibutuhkan.

SAVE DAN RESTORE STATE KANVAS

kembali saat dibutuhkan.

• Contoh berikut akan menyimpan perubahan atribut

fillStyle:

context.fillStyle = "rgb(255, 0, 0)";

context.save(); // Save the canvas state

• Sehingga ketika kemudian script kita tambahkan

menjadi berikut:

context.fillStyle = "rgb(255, 0, 0)";

context.save(); //Save the canvas state

SAVE DAN RESTORE STATE KANVAS

context.save(); //Save the canvas state

context.fillStyle = "rgb(0, 0, 255)";

context.fillRect(200, 50, 100, 100); //Blue square

context.restore(); //Restore the canvas state

context.fillRect(350, 50, 100, 100); //Red square

• Ketika dilakukan restore, atribut fillStyle akan

kembali seperti sebelum di-save (merah)

SAVE DAN RESTORE STATE KANVAS

• Kita dapat melakukan save berulang kali dan state

yang disimpan akan ditumpuk sebagai stack

• Pemanggilan method restore akan mengambil

tumpukan teratas dari stack state yang ada

KEUNTUNGAN SAVE DAN RESTORE STATE

tumpukan teratas dari stack state yang adacontext.fillStyle = "rgb(255, 0, 0)";

context.save();

context.fillRect(50, 50, 100, 100); // Red square

context.fillStyle = "rgb(0, 0, 255)";

context.save();

context.fillRect(200, 50, 100, 100); // Blue square

context.restore();

context.fillRect(350, 50, 100, 100); // Blue square

• Setiap kita menggambar sesuatu pada kanvas, maka

kita menambahkan sebuah objek baru pada kanvas

• Komposisi adalah akibat yang timbul ketika dua

objek atau lebih saling berinteraksi secara posisional:

KOMPOSISI

objek atau lebih saling berinteraksi secara posisional:

apakah akan mempengaruhi warna, letak tumpukan,

irisan dan lain sebagainya

• Yang termasuk ke dalam komposisi adalah

transparansi, arrangement, dan fungsi-fungsi

komposisi logika

• Kita dapat mengatur tingkat ketidaktembuscahayaan

(opacity) objek yang akan kita gambarkan dengan

mengubah nilai alpha-nya, di mana 1.0 berarti

opaque (tidak tembus pandang), dan 0.0 berarti

TRANSPARANSI (ALPHA)

opaque (tidak tembus pandang), dan 0.0 berarti

transparent (tembus pandang)

context.fillStyle = "rgb(63, 169, 245)";

context.fillRect(50, 50, 100, 100);

context.globalAlpha = 0.5;

context.fillStyle = "rgb(255, 123, 172)";

context.fillRect(100, 100, 100, 100);

• Hasil dari perubahan

nilai alpha:

TRANSPARANSI (ALPHA)

• Perlu diingat bahwa setiap kali kita mengubah atribut

konteks, berarti kita mengubah atribut kanvas, dan akan

mempengaruhi plotting untuk method pada baris-baris

berikutnya.

Namun, apa yang sudah terlanjur tergambar (ter-plot) tidak

ikut ter-update.

• Untuk operasi komposisi lainnya, HTML5

menyediakan atribut yang memudahkan kita untuk

tinggal memilih saja operasi komposisi yang ingin

diterapkan pada plotting untuk objek berikutnya.

OPERASI KOMPOSISI

diterapkan pada plotting untuk objek berikutnya.

context.fillStyle = "rgb(63, 169, 245)";

context.fillRect(50, 50, 100, 100);

context.globalCompositeOperation = "[nama

komposisi]";

context.fillStyle = "rgb(255, 123, 172)";

context.fillRect(100, 100, 100, 100);

• Source-over

Objek berikutnya (source) diletakkan di atas objek

yang sudah ada

context.globalCompositeOperation = "source-

OPERASI KOMPOSISI

context.globalCompositeOperation = "source-

over";

• Destination-over

Objek berikutnya (source) diletakkan di bawah objek

yang sudah ada (destination)

context.globalCompositeOperation = "destination-

OPERASI KOMPOSISI

context.globalCompositeOperation = "destination-

over";

• Source-atop

Objek berikutnya (source) diletakkan di atas objek

yang sudah ada (destination) tetapi yang terlihat

hanya area yang beririsan

OPERASI KOMPOSISI

hanya area yang beririsan

context.globalCompositeOperation = "source-

atop";

• Destination-atopBagian objek berikutnya (source) disipkan di bawah

objek yang sudah ada (destination), tetapi

mengakibatkan objek yang sudah ada hanya terlihat area

OPERASI KOMPOSISI

mengakibatkan objek yang sudah ada hanya terlihat area

yang beririsan.

context.globalCompositeOperation = "destination-

atop";

• Source-in

Bagian objek source yang beririsan dengan objek

destination akan dipertahankan, sisanya transparan

context.globalCompositeOperation = "source-in";

OPERASI KOMPOSISI

context.globalCompositeOperation = "source-in";

• Destination-in

Bagian objek destination yang beririsan dengan

objek source akan dipertahankan, sisanya transparan

context.globalCompositeOperation = "destination-

OPERASI KOMPOSISI

context.globalCompositeOperation = "destination-

in";

• Source-out

Bagian objek source yang tidak beririsan dengan

objek destination akan dipertahankan, sisanya

transparan

OPERASI KOMPOSISI

transparan

context.globalCompositeOperation = "source-out";

• Destination-out

Bagian objek destination yang tidak beririsan dengan

objek source akan dipertahankan, sisanya transparan

context.globalCompositeOperation = "destination-

OPERASI KOMPOSISI

context.globalCompositeOperation = "destination-

out";

• LighterOperasi ini tanpa order (urutan source-destination), jika ada

dua objek yang saling beririsan, maka warna pada kedua area

yang beririsan akan dijumlahkan. Seandainya nilainya lebih

besar dari 255, akan menjadi putih (upper value clipping)

OPERASI KOMPOSISI

besar dari 255, akan menjadi putih (upper value clipping)

context.globalCompositeOperation = "lighter";

• XOR

Operasi ini tanpa order (urutan source-destination),

jika ada dua objek yang saling beririsan, maka kedua

area yang beririsan akan ditransparankan

OPERASI KOMPOSISI

area yang beririsan akan ditransparankan

context.globalCompositeOperation = "xor";

• Sebelum memasuki bagian transformasi, ada baiknya

mengerti lebih dahulu mengenai transformasi dua

dimensi berikut ini, dan operasi komposisinya,

melalui slide No. 5

TRANSFORMASI

melalui slide No. 5

• Translasi

Memindahkan titik pusat kanvas ke koordinat baru

context.translate(tx, ty)

TRANSFORMASI

context.translate(tx, ty)

• Contoh:

context.translate (100, 100)

menggeser titik pusat kanvas sejauh 100 piksel ke

kanan dan 100 piksel ke bawah

• Skala/Dilatasi

Memperbesar skala satuan penggambaran kanvas

context.scale(sx, sy)

TRANSFORMASI

context.scale(sx, sy)

• Contoh:

context.scale(2, 2)

memperbesar skala satuan penggambaran kanvas

menjadi 2 kali ke sumbu x dan 2 kali ke sumbu y

• Rotasi

Memutar kanvas dengan sudut sekian π radian

context.rotate(angle_pi_radian)

TRANSFORMASI

context.rotate(angle_pi_radian)

• Contoh:

context.rotate(0.7854)

memutar kanvas sebesar 45 derajat searah jarum

jam (π/4)

• Transformasi BebasMatriks transformasi komposit dua dimensi yang kita lihat

pada slide yang lengkap, dapat kita anggap sebagai berikut:

TRANSFORMASI

• HTML 5 menyediakan method untuk

mengakomodasi elemen-elemen matriks tersebut

context.transform(xScale, ySkew, xSkew, yScale,

xTrans, yTrans);

• Transformasi Bebas – Contoh

context.setTransform(1, 0, 0, 1, 0, 0); //Reset transf

var xScale = Math.cos(0.7854);

var ySkew = -Math.sin(0.7854);

TRANSFORMASI

var ySkew = -Math.sin(0.7854);

var xSkew = Math.sin(0.7854);

var yScale = Math.cos(0.7854);

var xTrans = 200;

var yTrans = 200;

context.transform(xScale, ySkew, xSkew, yScale, xTrans,

yTrans);

context.fillRect(-50, -50, 100, 100);

WARNING!

• Karena transformasi merubah sifat kanvas secara

keseluruhan, maka jika transformasi hanya ingin

diterapkan pada satu objek saja, gunakan save dan

TRANSFORMASI

diterapkan pada satu objek saja, gunakan save dan

restore state

context.save(); //Save sblm transf

context.translate(150, 150);

context.scale(2, 2);

context.fillRect(0, 0, 100, 100);

context.restore(); //Kembalikan

context.fillRect(0, 0, 100, 100);

• Setiap objek yang akan di-plot dapat diberikan

bayangan, yang haris didefinisikan sebelumnya. Atribut bayangan berupa blur (lebar transisi menghilang

dalam piksel), offset (koordinat(x,y) pusat bayangan terhadap

BAYANGAN (SHADOW)

dalam piksel), offset (koordinat(x,y) pusat bayangan terhadap

objek� geserlah untuk drop shadow), dan warna bayangan

(dalam rgb atau rgba� RGB dengan alpha)

context.shadowBlur = 0;

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowColor = "rgba(100, 100, 100, 0.5)"

• Misal:

context.shadowBlur = 0;

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowColor = "rgba(100, 100, 100, 0.5)";

BAYANGAN (SHADOW)

context.shadowColor = "rgba(100, 100, 100, 0.5)";

context.fillRect(200, 50, 100, 100);

context.shadowBlur = 20;

context.shadowColor = "rgb(0, 0, 0)";

context.fillRect(50, 50, 100, 100);

• Untuk fillStyle, kita juga dapat mengisikan gradien,

selain warna solid. Sebelum kita gunakan, terlebih

dahulu harus didefinisikan gradiennya dengan

(x1,y1) dan (x2,y2) sebagai titik awal dan akhir

ISIAN GRADIEN

(x1,y1) dan (x2,y2) sebagai titik awal dan akhir

bentang gradien, color stop 0 sebagai warna awal

dan color stop 1 sebagai warna akhir

var gradient = context.createLinearGradient(x1, y1, x2,

y2);

gradient.addColorStop(0, "rgb(0, 0, 0)");

gradient.addColorStop(1, "rgb(255, 255, 255)");

context.fillStyle = gradient;

• Misal:

var gradient = context.createLinearGradient(0, 0, 0,

canvas.height());

gradient.addColorStop(0, "rgb(0, 0, 0)");

gradient.addColorStop(1, "rgb(255, 255, 255)");

ISIAN GRADIEN

gradient.addColorStop(1, "rgb(255, 255, 255)");

context.fillStyle = gradient;

context.fillRect(0, 0, canvas.width(), canvas.height());

• Seperti sudah disinggung sebelumnya, gunakan method

closePath() untuk menyambungkan titik akhir sebuah path

ke titik awalnya, guna membentuk sebuah poligon

• Close path akan menambah satu path dari titik akhir ke titik

POLIGON (CLOSED PATH)

Close path akan menambah satu path dari titik akhir ke titik

awal

context.beginPath();

context.moveTo(100, 50);

context.lineTo(150, 150);

context.lineTo(50, 150);

context.closePath();

context.stroke();

context.fill();

• Kurva bezier adalah kurva yang dibuat dari sebuah

garis dengan cara memberikan strain atau gaya tarik

pada masing-masing sisi ujung garis untuk

membentuk lekukan

KURVA BEZIER

membentuk lekukan

• Bagaimana membentuk kurva bezier, bisa dilihat di

buku pegangan hal. 118

• Apa yang telah tergambar pada kanvas, bisa kita

simpan ke dalam format PNG. Proses ini tidak

esensial untuk mata kuliah ini, tetapi jika anda

tertarik, bisa menelaah caranya pada buku pegangan

EKSPOR KANVAS KE PNG

tertarik, bisa menelaah caranya pada buku pegangan

hal. 121

• Materi berikutnya: Game World Representation

SELESAI UNTUK MATERI INI

Pustaka:

1. Rob Hawkes, Foundation HTML5 Canvas for Games and Entertainment, USA: FriendsofED (2011)

2. Berbagai artikel di Internet