Perbandingan animasi 2D dengan 3D yaitu :
Kita ketahui dari segi pengembangan gambar. Jelas animasi 3D yang menang dalam segi hal : Teknik suara, gambar, dan lebih nyata bentuk gambaran benda yang mati hingga digerakkan. Kalau 2D, kita tahu dalam pembuatan ini hanya penggabungan sketsa gambar yang dikonversi animasi flash ke CD.
Konsep untuk membuat animasi 2d meliputi :
1. Membuat konsep dan Ide cerita -> sinopsis
2. Membuat Storyboard
3. Menggambar Karakter
4. Menggambar Latar belakang dan objek lain
5. Pewarnaan
6. Proses animasi
7. Penggabungan animasi
8. Pengsian suara
9. Konversi Animasi Flash (SWF) ke VCD
Konsep untuk membuat animasi 3d meliputi :
Lingkungan Kerja 3ds Max
Viewport
Membuat Objek
Memodifikasi Objek
Memberi Material pada Objek
Mengatur Pencahayaan
Menggunakan Kamera
Membuat Animasi
Render
Mengolah Sistem Partikel
Latihan Aplikasi Animasi 3D
Pengertian animasi 2D dan 3D
Membuat shooter game pada html 5
<!DOCTYPE html>
<html>
<head>
<title>Membuat Game dengan HTML5</title>
</head>
<body>
<canvas id='c'></canvas>
<script src="gameLoop.js"></script>
</body>
</html>
code di atas simpan dengan nama index.html
var width = 250, //width of the canvas
height = 350, //height of the canvas
c = document.getElementById('c'), //canvas itself
gLoop, //sleep thread
ctx = c.getContext('2d'); //ctx supaya bisa pake fungsi primitif
c.width = width; //ngubah lebar canvas jadi 250
c.height = height; //ngubah tinggi canvas jadi 350
var clear = function(){
ctx.fillStyle = '#000000'; //warna
ctx.beginPath(); //awal ngegambar
ctx.rect(0, 0, width, height); //gambar kotak
ctx.closePath(); //tutup gambar
ctx.fill(); //isi dengan warna yg telah ditentukan
};
var a1 = 20 , a2 = 330,
b1 = 35 , b2 = 280,
c1 = 50 , c2 = 330;
var drawShip = function(){
ctx.fillStyle = '#0000FF';
ctx.beginPath();
ctx.moveTo(a1, a2); // ketitik a1, a2
ctx.lineTo(b1, b2); // gerak k titik b1, b2
ctx.lineTo(c1, c2); // dst
ctx.lineTo(a1, a2); // ...
ctx.closePath();
ctx.fill();
};
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
var gameInput = function() {
if (37 in keysDown) {
a1 -= 5;
b1 -= 5;
c1 -= 5;
}
if (39 in keysDown) {
a1 += 5;
b1 += 5;
c1 += 5;
}
};
var GameLoop = function(){
clear();
drawShip();
gameInput();
//fillText(text, x, y, maxWidth)
ctx.fillText("Game Space Invader", 10, 10, 100);
gLoop = setTimeout(GameLoop, 1000 / 50);
};
GameLoop();
code di atas simpan dengan nama gameLoop.js
