Buku Ajar · Grafika Game · IT9103

Pengantar Grafika Komputer dan Game

Dari representasi data dan evolusi visual, menuju proyek pertama dengan HTML5 Canvas.

01 Bab 1 dari rangkaian buku ajar Grafika Game

§0

Pertanyaan Pemantik

Apa yang sebenarnya dilakukan komputer ketika menampilkan sebuah game? Apakah komputer hanya "menggambar", ataukah ia juga mengelola data, ruang, waktu, perubahan kondisi, dan interaksi pemain?

Bab ini menghubungkan fondasi grafika komputer dengan konteks game — mulai dari representasi data, siklus real-time, evolusi visual, hingga praktik pertama menggunakan HTML5, JavaScript, dan Canvas.

§0

Tujuan Pembelajaran

Setelah mempelajari bab ini, mahasiswa mampu:

01Menjelaskan pengertian grafika komputer.
02Membedakan computer graphics, image processing, dan computer vision.
03Menjelaskan karakteristik sistem grafika real-time.
04Mengidentifikasi elemen grafika dalam game.
05Menjelaskan hubungan teknologi grafika dengan evolusi game.
06Menjelaskan evolusi grafika game dari vektor hingga 3D real-time.
07Menjelaskan peran HTML5, JavaScript, Canvas, browser, dan DevTools.
08Menyusun struktur proyek dan menjalankan contoh grafika interaktif.

Peta Konsep Bab 1

Grafika Komputerdan Evolusi Game

↓

Data → Visual

Graphics vs Image Processing

Graphics vs Computer Vision

Grafika Statis & Interaktif

Real-Time Graphics

Frame & Frame Rate

Elemen Visual Game

Evolusi Grafika Game

↓

Grafika mendukung representasi, interaksi, dan gameplay

1.1

1.1Pengertian Grafika Komputer

Computer graphics adalah bidang yang mempelajari cara merepresentasikan, membentuk, memanipulasi, dan menampilkan informasi visual dengan bantuan komputer. Grafika komputer tidak identik dengan kegiatan "menggambar" di layar — komputer harus menyimpan representasi objek, menghitung transformasi, menentukan warna, lalu menyusun hasil perhitungan menjadi piksel, berulang kali.

Konsep Inti — Grafika komputer adalah proses mengubah representasi data dan model menjadi keluaran visual. Pada game, keluaran visual terus diperbarui sesuai perubahan state permainan.

Contoh — data karakter sederhana

posisi x	240
posisi y	160
lebar	48
tinggi	72
arah gerak	kanan
status animasi	idle

Nilai-nilai ini belum berbentuk gambar — program grafika menggunakannya untuk menentukan tampilan pada tiap frame.

1.2

1.2Dari Data Menjadi Visual

Alur konseptual sistem grafika interaktif pada game:

Data / Assetmodel, tekstur, parameter

→

Scene Stateposisi, ukuran, orientasi

→

Transformasi& Geometri

→

Renderingwarna, cahaya, visibilitas

→

Frame Bufferkumpulan piksel

→

Displayframe tampil

Input Pemain

Keyboard, mouse, controller — mengubah scene state secara langsung.

Game Logic

Aturan, collision, dan state mempengaruhi data yang dirender pada frame berikutnya.

1.3

1.3Computer Graphics, Image Processing & Computer Vision

Ketiganya berhubungan dengan informasi visual, tetapi arah pemrosesan berbeda.

Bidang	Masukan Utama	Keluaran Utama	Pertanyaan Utama	Contoh dalam Game
Computer graphics	Data, model, geometri, state	Citra / frame sintetis	"Bagaimana data divisualkan?"	Merender karakter, lingkungan, UI, efek
Image processing	Citra atau frame	Citra yang telah diubah	"Bagaimana citra ditransformasi?"	Blur, sharpening, color grading
Computer vision	Citra atau video	Informasi, fitur, pose	"Informasi apa dari citra ini?"	Mengenali pose, wajah, marker

Cek Pemahaman — Webcam mengenali posisi tangan pemain lalu menampilkan pedang virtual yang mengikutinya: pengenalan posisi termasuk computer vision; pembentukan & tampilan pedang termasuk computer graphics.

1.4

1.4Grafika Statis dan Grafika Interaktif

Karakteristik	Grafika Statis	Grafika Interaktif
Perubahan tampilan	Tidak berubah setelah dihasilkan	Diperbarui sesuai input, waktu, atau state
Kontrol pengguna	Terbatas atau tidak ada	Pengguna memengaruhi kondisi visual
Proses rendering	Dapat dilakukan sekali	Dilakukan berulang kali
Kebutuhan waktu	Tidak selalu ketat	Sering memiliki batas waktu per frame
Contoh	Ilustrasi digital, poster, hasil render	Game, simulator, aplikasi AR/VR

Perbedaannya bukan hanya soal gambar bergerak — sebuah animasi video dapat bergerak tetapi urutan framenya sudah ditentukan sebelumnya, sehingga tidak interaktif.

1.5

1.5Konsep Real-Time Graphics

Grafika waktu-nyata cukup cepat sehingga sistem memberi respons visual langsung terhadap perubahan input dan state.

Input

→

Update State

→

Prepare Scene

→

Rendering

→

Frame Buffer

→

Present Frame

→

Persepsi Pemain

Target 60 FPS ≈ 16,67 ms tersedia per frame.

Pekerjaan > frame budget → frame terlambat / stutter.

1.6

1.6Frame, Frame Rate, dan Frame Time

Rumus dasar: waktu per frame (ms) = 1000 / FPS

Target FPS	Waktu per Frame	Implikasi Umum
30 FPS	≈ 33,33 ms	Anggaran lebih longgar, respons lebih jarang diperbarui
60 FPS	≈ 16,67 ms	Target umum untuk interaksi yang terasa halus
90 FPS	≈ 11,11 ms	Perlu pemrosesan lebih cepat, relevan untuk aplikasi imersif
120 FPS	≈ 8,33 ms	Respons sangat sering diperbarui, frame budget sangat ketat

Frame rate ≠ refresh rate: frame rate adalah seberapa sering aplikasi menghasilkan frame; refresh rate adalah seberapa sering layar memperbarui tampilan.

1.7

1.7Elemen Visual dalam Game

Character

Entitas pemain, NPC, atau lawan — sprite 2D, primitif, atau model 3D dengan posisi, animasi, dan state.

Environment

Latar, terrain, bangunan, batas arena — membentuk ruang dan mengarahkan aturan permainan.

UI & HUD

Menu, tombol, health, skor — memfasilitasi interaksi dan informasi yang relevan selama bermain.

Effects

Partikel, kilatan, screen shake — umpan balik visual bahwa sebuah peristiwa telah terjadi.

1.8

1.8Evolusi Grafika Game

Pixel / Raster AwalBentuk sangat sederhana

Sprite 2DAset 2D dapat dianimasikan

2.5D / Pseudo-3DRuang tampak 3D dengan batasan tertentu

3D PoligonalModel mesh dan kamera 3D

Real-Time ShadingShader, material, cahaya dinamis

Hybrid ModernRasterisasi + teknik ray-based

Evolusi grafika game tidak hanya soal "realisme" — juga mencakup interaktivitas, skala dunia, kestabilan frame rate, dan fleksibilitas pipeline rendering.

1.9

1.9Grafika dan Gameplay

Representasi Matematis	Representasi Visual	Konsekuensi Gameplay
Posisi (x, y)	Objek tampil di lokasi tertentu	Jangkauan, navigasi, target
Ukuran / skala	Objek tampak besar atau kecil	Keterbacaan, hitbox, prioritas
Transformasi	Berpindah, berputar, berubah ukuran	Gerak, orientasi, animasi
Bounding volume	Batas abstrak objek	Collision dan hit testing
Layer / depth	Urutan atau kedalaman tampilan	Occlusion dan fokus visual

Contoh: sebuah koin memiliki posisi & ukuran untuk digambar; sistem collision memakai bounding circle-nya untuk mendeteksi sentuhan pemain — mengubah skor dan state koin menjadi "diambil", yang lalu tidak dirender lagi pada frame berikutnya.

1.10

1.10Studi Kasus: Dari Tombol ke Piksel

Saat pemain menekan tombol panah kanan:

1Sistem input mendeteksi tombol panah kanan.
2Logika game mengubah kecepatan atau posisi karakter.
3State karakter menyimpan koordinat baru.
4Sistem rendering membaca state dan menghitung lokasi visual.
5Frame baru dibentuk pada frame buffer.
6Frame ditampilkan pada layar.
7Pemain melihat karakter berpindah, lalu menentukan input berikutnya.

1.11

1.11Mengapa Game 2D Klasik Tetap Relevan

Mekaniknya dapat diuraikan menjadi komponen yang jelas — tanpa kompleksitas engine, aset 3D, atau shader.

Duel Vektor

Posisi + arah + proyektil

Asteroid Field

Gerak + rotasi + collision

Brick Breaker

Pantulan + collision + skor

Maze Chase

Grid + state + collision

1.12

1.12Ekosistem HTML5, JavaScript, dan Canvas

HTML5<canvas> host struktur

→

JavaScriptlogika, input, state

→

Canvas 2Dpermukaan gambar

DevToolsconsole + inspector — mendukung debugging JavaScript

Siklus — Input → JavaScript → Update State → Draw ke Canvas → Tampilan

Canvas bukan game engine — ia tidak "mengerti" bahwa sebuah bentuk adalah pemain, peluru, atau tombol. Program JavaScript-lah yang menyimpan state dan memanggil fungsi drawing.

1.12.2

1.12.2Canvas 2D, SVG, dan WebGL

Aspek	Canvas 2D	SVG	WebGL
Model	Bitmap; perintah drawing	Objek vektor dalam DOM	Pipeline berbasis GPU
Cocok untuk	Game 2D, animasi, visualisasi	Diagram, ikon, grafika vektor	Grafika 2D/3D performa tinggi
Pengelolaan objek	Dikelola sendiri oleh program	Setiap elemen dapat diakses via DOM	Buffer, shader, tekstur, state grafika
Kompleksitas awal	Rendah	Rendah–menengah	Lebih tinggi
Fokus buku ini	Ya	Sebagai pembanding	Pengayaan

1.13

1.13Tools dan Alur Kerja Pengembangan

Editor Kode

VS Code atau editor lain dengan syntax highlighting dan pemeriksaan kurung.

Browser & DevTools

Console, Elements/Inspector, Sources, Performance untuk debugging.

Server Lokal

Disarankan agar modul JS dan aset dimuat konsisten, tidak lewat protokol file://.

python -m http.server 8000
# Buka http://localhost:8000 di browser

Alur kerja minimum — buka folder di editor → jalankan server lokal → buka DevTools → amati Console → ubah kecil → simpan → muat ulang.

1.14

1.14Struktur Proyek & Penamaan File

asteroid-dodger/
├── index.html
├── css/
│  └── style.css
├── js/
│  └── main.js
└── assets/
    ├── images/
    └── audio/

Aturan	Contoh
Huruf kecil	player-ship.png
Hindari spasi	game-over.png
Nama deskriptif	asteroid-large.png
Ekstensi sesuai isi	main.js · style.css

Path bersifat relatif terhadap file pemanggil: dari index.html, stylesheet diakses via css/style.css.

1.15

1.15Proyek Pertama: Hello Canvas

// js/main.js (cuplikan)
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const player = { x: 220, y: 570, width: 40, height: 36, speed: 260 };
const asteroids = [ {x:75,y:130,radius:24}, {x:250,y:215,radius:34} ];

function gameLoop(currentTime) {
  update(deltaTime);
  render();
  requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

Tiga file terpisah — HTML (struktur), CSS (tampilan), JS (logika) — membuktikan bahwa browser dapat menemukan elemen canvas, memperoleh konteks 2D, dan menggambar scene.

Menggunakan game loop, input keyboard, dan delta time sebagai pratinjau — dibahas sistematis pada bab berikutnya.

1.16

1.16Sistem Koordinat Canvas

Titik asal (0,0) berada di sudut kiri atas. Nilai x bertambah ke kanan, nilai y bertambah ke bawah — berbeda dari koordinat Kartesian matematika.

Posisi, gerak, collision, kamera, dan tata letak UI semuanya bergantung pada arah sumbu ini.

(0,0)

x →

↓ y

1.17

1.17Hasil Program dan Pemeriksaan

SKOR 000

Pesawat bergerak kiri–kanan; asteroid masih statis. Belum ada collision, skor dinamis, atau kondisi menang/kalah — jembatan menuju bab berikutnya.

✓index.html berada di root proyek
✓Path css/ & js/ sesuai nama file
✓Console diperiksa untuk error pertama
✓getContext('2d') tidak null

1.18

1.18Proyek Integratif: Asteroid Dodger

Komponen	Draf Awal
Gameplay	Pemain mengendalikan pesawat untuk menghindari atau menembak asteroid
Objek utama	Pemain, asteroid, bintang latar, peluru opsional
Kontrol	Keyboard; mouse/touch pada tahap lanjut
Kriteria menang	Bertahan durasi tertentu atau mencapai skor target
Kriteria kalah	Bertabrakan dengan asteroid atau health habis

Dokumen hidup — spesifikasi ini akan diperbarui setelah materi input, gerak, collision, state, dan kamera dipelajari.

1.19

1.19Rangkuman

•Grafika komputer mengubah data/model menjadi representasi visual.
•Grafika bekerja bersama state, input, logika, waktu, dan aturan permainan.
•Image processing mengubah citra; computer vision mengekstraksi informasi.
•Real-time graphics memiliki batas waktu per frame — 60 FPS ≈ 16,67 ms.
•Evolusi grafika mencakup era vektor hingga hybrid modern.
•Game 2D klasik memisahkan konsep inti dengan jelas.
•HTML mengatur struktur, JS mengelola logika, Canvas jadi bitmap.
•Struktur folder konsisten mengurangi kesalahan path.
•Hello Canvas memperlihatkan data → input → update → render → frame.
•Asteroid Dodger jadi proyek integratif sepanjang buku.

1.20

1.20Evaluasi dan Latihan

A · Konseptual

10 pertanyaan — mis. menghitung frame time untuk 50/60/75 FPS, membedakan frame rate vs refresh rate.

B · Analisis

4 kasus — mis. menganalisis apakah target 60 FPS bertahan jika update 5 ms + render 14 ms.

C · Praktik

4 tugas — modifikasi Hello Canvas, tambah primitif baru, susun draf spesifikasi Asteroid Dodger.

Rubrik penilaian mencakup struktur proyek, keberhasilan eksekusi, ketepatan koordinat, modifikasi visual, dan kelengkapan spesifikasi.

1.22

1.22Istilah Kunci

Frame

Satu citra lengkap yang ditampilkan pada satu momen.

Frame Rate

Jumlah frame yang dihasilkan/ditampilkan tiap detik (FPS).

Rendering

Proses menghasilkan tampilan visual dari data atau state.

Sprite

Citra 2D untuk merepresentasikan objek game.

Shader

Program pada tahap tertentu dalam pipeline grafika terprogram.

State

Kumpulan data yang menggambarkan kondisi sistem pada saat tertentu.

Selesai — Bab 1

Fondasi sudah terpasang: data, state, siklus render, dan proyek pertama.

Bab berikutnya melanjutkan ke fungsi drawing dan struktur game loop secara lebih sistematis, membangun di atas Asteroid Dodger.