Scribd Logo
Upload

Welcome to Scribd!

  • Minggu Empat Boundaries

    Uploaded by

    Joshua Penta
    3 views6 pages
    html5

    Original Title

    minggu_empat_boundaries

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html5

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views6 pages

    Minggu Empat Boundaries

    Uploaded by

    Joshua Penta
    html5

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    MINGGU KE EMPAT

    TOLONG PELAJARI BAB 6 PADA BUKU HTML5 ANIMATION

    BOUNDARIES, DAN FRICTION,

    alam setiap pergerakan objek tentunya dibatasi oleh lingkungan sekitar, seperti:

    D tanah, rumah, dinding, lapangan, area bermain, dan lain-lain. Demikian juga
    ketika menambilkan objek pada layar akan dibatasi oleh lingkungan objek yang
    berupa batas layar. Dalam membuat game tentunya juga mempunyai lingkungan
    batasan seperti area game, area pengaturan, kecepatan objek, gaya gesek benda
    bergerak, dan sebagainya.

    4.1. PEMBUATAN BATASAN UNTUK AREA ANIMASI

    Batasan-batasan untuk menampilkan animasi perlu mendapat perhatian untuk


    mencegah pergerakan objek meninggalkan ruang animasi kita. Dalam animasi yang kita
    buat, kita dapat membuat batasan berupa seluruh canvas, atau hanya sebagian canvas
    untuk menampilkan animasi kita, sedangkan bagian canvas yang lain bisa berisi
    informasi atau yang lainnya. Jika objek animasi mencapai batas area animasi apa yang
    akan dilakukan? Berikut ini akan dibahas mengenai pembuatan BATASAN (Boundary)
    untuk Area Animasi dan Cara menangani objek yang melebihi batasan.

    Pembuatan batasan yang paling sederhana adalah menjadikan seluruh canvas sebagai
    area animasi. Selanjutnya untuk mengetahui batasan dari canvas dilakukan dengan
    mengambil informasi dari canvas dan memasukkannya ke dalam variabel, misalnya:

    var btsKanan:Number=canvas.width – informasi lebar canvas - batas kanan layar


    btsBawah:Number=canvas.height –informasi tinggi canvas – batas bawah layar

    Dengan informasi batasan layar yang kita peroleh, maka kita dapat mengubah gerakan
    animasi kita, misalnya apabila bola menyentuh batas kanan layar maka arah bola akan
    diubah menjadi ke kiri dapat dilakukan dengan menjalankan kode berikut.

    If(bola.x > btsKanan){ bola.vx *=-1 }


    Beberapa tindakan yang biasanya dilakukan pada saat objek menuju ke luar batasan
    antara lain:
    a. Menghilangkan objek. Misalnya dengan menggunakan perintah splice pada objek
    array.
    b. Membawa kembali ke dalam canvas dengan mengubah arah objek.
    c. membuat objek baru yang sama (regeneration)

    Teknik animasi – 2013- Nugroho dan Hendro Page 1


    d. memunculkan kembali objek ke dalam canvas dari lokasi yang berbeda (screen
    wrapping)
    MENGHILANGKAN OBJEK.
    Contoh pseudocode untuk menghilangkan objek satu demi satu dari sebuah array.

    if (bola.x > btsKanan OR bola.x < 0 OR


    bola.y > btsBawah OR bola.y < 0){
    arrBola.splice(arrBola.indexOf(bola),1);
    }

    Namun mengingat koordinat terletak pada titik pusat/tengah bola, maka ketika baru
    setengah bola yang keluar dari canvas, splice bola akan sudah dilakukan. Oleh sebab itu,
    anda dapat melakukan sedikit revisi mengenai pengujian keluar atau belumnya bola dari
    canvas menjadi berikut.

    if (bola.x – bola.radius > btsKanan OR bola.x + bola.radius < 0 OR


    bola.y – bola.radius >btsBawah OR bola.y + bola.radius < 0){
    arrBola.splice(arrBola.indexOf(bola),1);
    }

    Berikut ini contoh kode html5 untuk removal.

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Removal</title>

    <link rel="stylesheet" type="text/css" href="pendukung/style.css">

    </head>

    <body>

    Teknik animasi – 2013- Nugroho dan Hendro Page 2


    <canvas id="canvas" width="400" height="400"></canvas>

    <textarea id="log"></textarea>

    <script src="pendukung/utils.js"></script>

    <script src="pendukung/ball.js"></script>

    <script>

    window.onload=function(){

    var canvas=document.getElementById('canvas'),

    context=canvas.getContext('2d'),

    mouse=utils.captureMouse(canvas),

    btsKanan=canvas.width

    btsBawah=canvas.height,

    gravitasi=0.02,

    arrayBola=[],

    jumBola=15,

    log = document.getElementById('log');

    for(var bolaR,i=0;i<jumBola;i++){

    bolaR=new Ball(10,0xff0000);

    bolaR.x = canvas.width/2;

    bolaR.y = canvas.height/2;

    bolaR.vx = 1 - Math.random() * 2;

    bolaR.vy = 1-Math.random()*2;

    bolaR.id = "bola ke-" + i;

    arrayBola.push(bolaR);

    function draw(bolaR,pos){

    //bolaR.vy +=gravitasi;

    bolaR.x += bolaR.vx;

    Teknik animasi – 2013- Nugroho dan Hendro Page 3


    bolaR.y += bolaR.vy;

    bolaR.x += bolaR.vx;

    bolaR.y += bolaR.vy;

    if (bolaR.x - bolaR.radius > btsKanan ||

    bolaR.x + bolaR.radius < 0 ||

    bolaR.y - bolaR.radius > btsBawah ||

    bolaR.y + bolaR.radius < 0) {

    arrayBola.splice(pos, 1); //remove ball from array

    if (arrayBola.length > 0) {

    log.value = "bola ke-" + bolaR.id+" menghilang";

    } else {

    log.value = "Habis sudah!";

    bolaR.draw(context);

    (function drawFrame(){

    window.requestAnimationFrame(drawFrame,canvas);

    context.clearRect(0,0,btsKanan,btsBawah);

    var i=arrayBola.length;

    while(i--){

    draw(arrayBola[i],i)

    }());

    };

    </script>

    </body>

    </html>

    Teknik animasi – 2013- Nugroho dan Hendro Page 4


    4.2. MENGHENTIKAN OBJEK SECARA PERLAHAN MENGGUNAKAN FRICTION(GAYA GESEK)

    Animasi yang berupa gerakan terus menerus seringkali harus bisa dihentikan oleh user,
    misalnya animasi mobil yang dihentikan dengan menginjak rem, atau mobil bergerak di
    rerumputan dan sebagainya. Teknik menghentikan gerakan ini dapat menggunakan
    prinsip kerja gaya gesek/friction. Ada dua cara membuat friction pada gerakan objek.

    a. Gaya gesek sebagai pengurang gaya yang menggerakan benda, misalnya:


    var bola:Bola=new Bola()
    var friksi: Number = 0.05
    If (bola.vx > friksi){
    bola.vx -= friksi
    }
    Else {bola.vx = 0}
    Kecepatan bola akan berkurang sebesar 0.05 setiap enterFrame, sehingga bola
    akan bisa berhenti
    b. Memperkecil secara rekursif, misalnya:
    Private var bola:Bola=new Bola()
    Private var friksi: Number = 0.9
    If (bola.vx > 0.001){
    bola.vx *= friksi
    }
    Else {bola.vx=0}
    Kecepatan bola akan semakin mengecil dengan skala pengecilan sebesar 0.9 kali.

    Berikut ini diberikan contoh kode html5 untuk Friksi.


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Gerak Friksi</title>
    <link rel="stylesheet" type="text/css" href="pendukung/style.css">
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <textarea id="log"></textarea>
    <textarea id="log2"></textarea>
    <script src="pendukung/utils.js"></script>
    <script src="pendukung/ball.js"></script>

    Teknik animasi – 2013- Nugroho dan Hendro Page 5


    <script>
    window.onload=function(){
    var canvas=document.getElementById('canvas'),
    context=canvas.getContext('2d'),
    mouse=utils.captureMouse(canvas),
    gravitasi=0.08,
    friksi=-0.9,
    log = document.getElementById('log'),
    log2 = document.getElementById('log2'),
    bolaR=new Ball(10,0xff0000);
    bolaR.x = canvas.width/2;
    bolaR.y = 0;
    bolaR.vx = Math.random() * 2;
    bolaR.vy = Math.random() * 2;
    bolaR.draw(context);

    (function drawFrame(){
    window.requestAnimationFrame(drawFrame,canvas);
    context.clearRect(0,0,canvas.width,canvas.height);
    bolaR.vy +=gravitasi;
    bolaR.x += bolaR.vx;
    bolaR.y += bolaR.vy;
    log.value = "bola.vy = " + bolaR.vy;
    log2.value = "bola.vx = " + bolaR.vx;
    if(bolaR.y > canvas.height - bolaR.radius){
    bolaR.vy *=friksi;
    }
    if(bolaR.x > canvas.width - bolaR.radius || bolaR.x < 0+ bolaR.radius){
    bolaR.vx *=friksi;
    }
    bolaR.draw(context);
    }());
    };</script>
    </body>
    </html>

    Teknik animasi – 2013- Nugroho dan Hendro Page 6

    You might also like