Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Aesthetics
Gamedevelopment

 Going Old School: Membuat Game Dengan Estetika Retro

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhamad Zulfiqor (you can also view the original English article)

 Segala sesuatu lama baru lagi, dan game retro lebih populer dari sebelumnya. Didukung oleh nostalgia dan banyaknya permainan bergaya kasual dan arcade di perangkat iOS dan Android, game jadul membuat comeback.  Dalam tutorial ini saya akan memberi Anda beberapa tips untuk membuat game retro-themed yang sukses.


Memilih Gaya Retro

 Apa yang kita maksud ketika kita berbicara tentang game 'retro'?  Tidak ada definisi konkret, tetapi saya biasanya memikirkan game yang dibuat sebelum tahun 1990.  Ini termasuk game dari konsol seperti GameBoy, NES, Atari 2600, dan Commodore 64, serta game arcade klasik seperti Pac Man, Lipan, dan Space Invaders.

 Semua contoh tersebut menggunakan grafis blocky, pixelated, bitmap (atau 'raster').  Ini adalah jenis permainan yang mungkin muncul dalam pikiran kebanyakan orang ketika mereka memikirkan game retro.

Retro Games with Raster Graphics
 Grafik Raster: Pac Man (Arcade), Frogger (Atari 2600), Super Mario Bros. (GameBoy)

 Tetapi video game paling awal benar-benar menggunakan grafik vektor.  Game seperti Battlezone, Asteroids, dan Tempest ditampilkan dengan garis bercahaya terang, bukan piksel kuning.

Retro Games with Vector Graphics
 Grafis Vektor: Battlezone (Arcade), Tempest (Arcade), MineStorm (Vectrex)

 Jenis permainan lain yang digunakan oleh orang tua kami adalah permainan genggam sederhana yang menggunakan layar LCD monokrom dan mekanika permainan yang sangat sederhana.

Retro Games with LCD Graphics
 Grafik LCD: Donkey Kong Jr. (Game & Tonton), Pabrik Semen Mario (Permainan & Tonton)

 Dalam tutorial ini, kita akan berbicara tentang permainan grafis raster yang lebih populer, tetapi saya menyebutkan jenis game lainnya karena tidak sering ditiru, dan saya rasa ada banyak kesempatan bagi desainer game untuk melakukan sesuatu yang sangat keren dengan gaya itu.


Membuat Palet Warna

 Untuk menciptakan tampilan retro yang meyakinkan, Anda akan ingin bekerja dengan serangkaian warna terbatas.

 Konsol game sekolah tua hanya mampu menampilkan sejumlah warna terbatas.  Tergantung pada sistem, grafik akan ditampilkan dalam warna hitam dan putih, grayscale, atau 8- atau 16-bit.  Anda dapat melihat contoh palet warna yang tepat dari sistem tertentu di Wikipedia, tetapi tidak penting untuk memilih warna yang akurat secara historis selama Anda mempertahankan gaya yang konsisten dalam permainan Anda.

 Kami tidak menghadapi keterbatasan perangkat keras yang sama yang kami lakukan di masa lalu, tetapi menjaga agar palet Anda terbatas pada beberapa warna yang dipilih dengan cermat tidak hanya akan menekankan estetika retro, tetapi juga akan membantu menentukan identitas permainan Anda.  Lihatlah dua contoh palet warna ini dari Super Mario Bros .:

Color Palettes from Super Mario Bros.

 Warnanya sangat berbeda, Anda hampir bisa mengenali permainan hanya dari warna swatch.
 David Sommers memiliki koleksi bagus palet permainan klasik di ColourLovers.com.

 Warna yang tepat yang Anda pilih akan bergantung pada tema dan suasana hati permainan Anda, tetapi jika Anda meluangkan waktu untuk memilih serangkaian warna yang bagus, permainan Anda akan terasa ikonik seperti klasik.  Lihatlah contoh modern ini:

Modern Games with Retro Palettes
 Canabalt oleh Adam Atomic, The Last Rocket oleh Shaun Inman, Fez oleh Polytron

 Jika Anda kesulitan memilih warna yang bekerja sama dengan baik, lihat tutorial hebat ini oleh Tyler Seitz, Memilih Palet Warna untuk Karya Seni Game Anda.


 Memilih Ukuran Pixel

 Permainan raster Retro paling mudah dikenali oleh piksel besar, mulai dari saat resolusi layar jauh lebih rendah.  Di dunia layar HD dan layar Retina saat ini, piksel fisik pada perangkat kami hampir tidak terlihat - tidak cukup menonjol untuk mendapatkan tampilan retro yang konkrit.

Scaling Up a Game Sprite
 Dalam contoh ini setiap piksel dari grafik karakter kami sedang ditampilkan di layar dengan empat piksel fisik.

 Untuk menjelaskan ini, kita perlu menggunakan beberapa piksel fisik untuk menampilkan setiap piksel yang terlihat dalam grafik permainan kami.

Different Scale Factors

 Anda dapat memutuskan tingkat skala apa yang tepat untuk gim Anda, tergantung pada seberapa banyak Anda ingin permainan Anda terlihat.  Biasanya skala hingga dua atau tiga kali ukuran normal memberi efek yang baik.  Perlu diingat bahwa semakin besar Anda pergi, semakin sedikit Anda bisa muat di layar.

 Saya menyarankan agar Anda selalu membiarkan engine game Anda melakukan skala piksel untuk Anda.  Ini berarti bahwa semua aset dan teks Anda diambil sebesar 100% (kecil) dan gim tersebut hanya meningkatkan seluruh kanvas permainan untuk mencapai ukuran akhir.  Anda sebenarnya bisa menggambar aset dengan piksel yang lebih besar, tetapi ini akan meningkatkan ukuran file dan waktu pemuatan, dan juga dapat berdampak negatif pada kinerja game.

Pixel Scale Inconsistencies
 Ukuran piksel yang tidak konsisten tidak terlihat benar.

 Mencoba menskalakan aset Anda secara manual juga dapat menyebabkan inkonsistensi dalam skala piksel Anda.  Dalam contoh di atas, perhatikan bagaimana piksel dalam judul game sangat besar dibandingkan dengan piksel kecil di teks tombol 'Putar Sekarang'.  Juga, karakter permainan kami adalah blockier dari permata atau lantai gua.  Beberapa di antaranya adalah perbedaan yang halus tetapi semuanya menambahkan hingga membuat game tampak sedikit 'off'.

 Neven Mrgan (co-creator of The Incident) berbicara sedikit lebih banyak tentang ini di blognya.


 Menggambar Seni Pixel

 Menciptakan seni piksel yang tampak hebat bisa sangat menantang.  Dibutuhkan banyak latihan, dan merupakan topik yang terlalu panjang untuk sepenuhnya dibahas dalam tutorial ini.  Berikut ini beberapa tautan untuk membantu Anda memulai:

 Alat Menggambar & Animasi

 Banyak orang menggunakan program grafis reguler seperti Photoshop, Gimp, atau bahkan MS Paint untuk menggambar seni piksel.

 Saya merasa frustrasi untuk menggunakan Photoshop begitu saya mulai mencoba menghidupkan karakter dan meletakkan ubin tanpa batas.  Jadi saya membuat alat yang disebut Pickle untuk membantu mengisi beberapa fungsi yang hilang dari editor tradisional, seperti pratinjau animasi langsung, pratinjau ubin mulus, dan preview ubin medan.

Pickle Sprite Editor

Pickle memiliki seperangkat fitur terbatas dan tidak memenuhi kebutuhan semua orang.  Untungnya ada aplikasi serupa lainnya seperti Pyxel Edit, ASEPRITE, dan GraphicsGale.

Tutorial

 Ada banyak tutorial seni piksel yang bagus secara online.  Berikut beberapa yang saya temukan bermanfaat di masa lalu:


Desain Karakter

 Merancang karakter yang meyakinkan dengan grafis lo-res bisa sangat sulit.  Bagaimana Anda bisa menggambarkan cukup detail untuk membuat karakter unik dengan begitu sedikit piksel dan warna untuk digunakan?

 Seperti halnya menggambar seni pixel pada umumnya, desain karakter adalah sesuatu yang membutuhkan kesabaran dan latihan.  Kita bisa belajar beberapa strategi yang bermanfaat dari karakter permainan klasik.

 Gunakan Batasan untuk Keuntungan Anda

Mario Mario

 Lihatlah teman kita Mario di sini.  Perhatikan bagaimana beberapa piksel digunakan untuk menggambarkan karakter manusia yang dapat dikenali.  Tiga warna, tanpa garis tepi, tanpa bayangan.  Bagaimana Anda bisa menggambar wajah dengan batasan-batasan ini?  Lihatlah bagaimana piksel yang menggambar kumis Mario juga berfungsi untuk mendefinisikan hidung dan mulutnya juga.

 Ini juga akan sulit untuk menarik lengan Mario pada tingkat detail ini tanpa mereka menyatu ke tubuhnya, membuat tubuhnya terlihat seperti gumpalan kecil.  Pencipta Mario memecahkan masalah ini dengan berpakaian overall.  Lihat bagaimana garis-garis pakaiannya dengan jelas memisahkan lengannya dari sisa tubuhnya? Jenius

 Dalam hal ini, menambahkan atribut fisik tertentu pada karakter (rambut dan pakaian wajah) sebenarnya membuatnya lebih mudah untuk menariknya dalam batasan grafis.  Keterbatasan sendiri menginformasikan desain karakter.

Maju Abstrak!

Pac-Man and Ghosts

 Teknik lain untuk mengatasi batasan grafis adalah abstrak.  Mengapa repot-repot mencoba menggambar karakter manusia yang dapat dikenali, jika Anda tidak perlu melakukannya?  Lihatlah Pac-Man di sana.  Dia bukan sesuatu yang bisa dikenali.  Dia hanya gumpalan kuning dengan mulut.

 Pac-Man adalah karakter yang mudah diingat meskipun tidak memiliki atribut fisik.  Dia mendapatkan kepribadiannya dari gameplay - cara dia bergerak melalui labirin, efek suaranya dan cara dia berinteraksi dengan musuh-musuhnya.

 Siapa bilang kamu harus memiliki karakter manusia di gimmu?  Mengapa tidak membuat Pac-Man berikutnya, Q * bert, atau Qix?


 Menu dan Skor Teks

 Saat membuat grafik untuk layar judul Anda, menu dalam game dan elemen teks lainnya seperti skor Anda harus tetap konsisten dengan gaya aset grafik Anda.  Ini berarti menjaga palet warna, ukuran pixel dan gaya seni yang sama.

Antialiased Text
 Gotham Bold oleh Hoefler dan Frere-Jones (anti-aliased)

 Kebanyakan font dirancang untuk anti-alias (diperhalus) ketika ditampilkan di layar.  Ini berarti jika kita mencoba untuk meledakkannya agar sesuai dengan ukuran piksel kita, kita akan melihat banyak piksel berisik di sekitar tepi huruf.  Itu juga tidak sesuai dengan estetika yang kita inginkan.  Ini semua lembut dan buram bukan renyah dan kuning.

Aliased Text
 Gotham Bold tanpa anti-aliasing

So we want to display the fonts without anti-aliasing. Jadi kami ingin menampilkan font tanpa anti-aliasing.  Tetapi hanya menampilkan font normal tanpa smoothing biasanya akan terlihat mengerikan.  Mereka hanya tidak dirancang untuk bekerja seperti itu. See how funky and hard to read it is at 100%? Lihat bagaimana funky dan susah untuk membacanya pada 100%?  Ketika kita meledakkannya kita dapat melihat banyak piksel nyasar dan goresan yang tidak rata.

Pixel Font
 Bionika Black oleh Atomic Media

 Jawabannya adalah selalu menggunakan font yang dirancang untuk ditampilkan tanpa anti-aliasing.  Mereka membaca bagus dan bersih dalam ukuran kecil, dan memiliki tampilan retro chunky besar ketika kita meniupnya besar.

 Beberapa font pixel favorit saya dibuat oleh Matthew Bardram dari Atomic Media.

 Satu peringatan untuk menggunakan font pixel adalah bahwa setiap font dirancang untuk bekerja hanya pada ukuran tertentu.  Pastikan Anda hanya menggunakan font pada ukuran tertentu ini atau kelipatan dari ukuran itu.  Jadi jika Anda menggunakan font yang dirancang untuk bekerja pada 10pt, itu juga akan terlihat bagus pada 20 atau 30pt, tetapi tidak pada ukuran di antaranya.


 Mekanika Game

 Pikirkan tentang jenis mekanisme permainan apa yang paling cocok dengan gaya seni Anda.  Memilih mekanik klasik yang disederhanakan akan membantu pemain Anda memasuki suasana retro.  Beberapa mekanik permainan klasik adalah penembak ruang (Asteroid, Space Invaders), platformer (Super Mario Bros, Donkey Kong), dan game petualangan (Petualangan, Zelda).

 Perlu diingat bahwa gaya seni Anda yang terbatas akan mempersulit Anda untuk menyampaikan informasi yang rumit kepada pemain, jadi seorang mekanik sederhana dapat menjadi manfaat besar.

 Seberapa sederhanakah Anda membuat game Anda?  Bisakah Anda merancang gim yang hanya menggunakan satu tombol untuk kontrol?
 Permainan satu tombol bekerja sangat baik pada perangkat berbasis sentuh, karena pemain hanya dapat menumbuk pada layar tanpa harus khawatir tentang memukul area tombol yang non-taktil.

 Banyak permainan bergaya pelari tanpa akhir menggunakan skema kontrol satu tombol (Canabalt, Jetpack Joyride, Tiny Wings).  Bisakah Anda tampil dengan gaya permainan berbeda yang bekerja sama dengan hanya satu tombol untuk kontrol?


 Efek Distorsi

 Jika Anda pernah memainkan salah satu permainan arcade sekolah tua favorit Anda dalam sebuah emulator di komputer Anda, Anda mungkin telah memperhatikan bahwa itu tidak terasa sama.  Semuanya sedikit terlalu jernih dan bersih di monitor komputer Anda dibandingkan dengan tampilan monitor arcade yang kabur, berkedip, terdistorsi, atau televisi CRT lama Anda sejak kecil.

 Beberapa orang mungkin berpikir itu adalah hal yang baik bahwa kita tidak harus tahan dengan artefak distorsi dari era lampau ini, tetapi itu bisa menyenangkan untuk menambahkan sedikit ketidakjelasan kembali ke permainan yang terinspirasi retro.

 Berikut beberapa contoh cara Anda dapat meniru layar CRT lama:

CRT Screen Effects

 Scan Lines: Anda dapat menggunakan grafik statis berupa garis-garis putih tipis yang sempit dan sempit untuk mensimulasikan garis pemindaian CRT.  Hanya lapisan mereka di atas permainan Anda.  Sesuaikan opasitas dan mode campuran untuk mencapai gaya dan intensitas yang Anda inginkan.

 Kebisingan: Gaussian noise dapat menambahkan tekstur yang bagus ke gim Anda.  Idealnya suara akan beranimasi, tetapi gambar statis akan bekerja dengan cukup baik jika memiliki suara yang terus-menerus menjiwai mempengaruhi kinerja permainan Anda.

 Blur: Sebuah blur yang sangat sedikit menambahkan kelembutan yang bagus pada gambar.  Jangan terlalu jauh dengan yang satu ini; Anda masih ingin dapat melihat piksel.

 Color Fringing: Salah satu efek old school favorit saya adalah menambahkan sedikit fringing warna RGB.  Anda dapat melakukan ini dengan memisahkan kanvas game ke dalam saluran terpisah untuk merah, hijau dan biru dan menggesernya sedikit keluar dari keselarasan.  Efek ini terlihat sangat bagus ketika animasi, tetapi bisa sangat intensif prosesor, jadi Anda mungkin perlu membatasi penggunaannya.  Saya memiliki tutorial lain di mana saya menunjukkan bagaimana menerapkan efek dengan AS3: Buat Efek Distorsi Retro CRT Menggunakan Pergeseran RGB.

 Kombinasi: Gabungkan beberapa efek untuk kesenangan maksimal!

Animated CRT Screen Effects

 Anda juga dapat menambahkan bar roll animasi untuk mensimulasikan CRT yang tidak berfungsi.

 Flash game Cronus X mengimplementasikan banyak efek ini dengan baik selama transisi menu.  Ini adalah solusi yang baik jika Anda khawatir tentang efek yang berdampak negatif terhadap kinerja permainan.


Inovasi

 Jangan terlalu terbebani oleh kendala game jadul.  Lebih penting bagi permainan untuk bersenang-senang memiliki 'perasaan' retro daripada menjadi akurat secara historis.

 Dan cobalah untuk tidak hanya menciptakan penembak ruang atau platformer klasik.  Tambahkan beberapa inovasi untuk menjadikan game Anda unik.  Gunakan estetika retro sebagai titik awal, tetapi tambahkan beberapa gaya dan elemen unik Anda sendiri untuk menciptakan sesuatu yang baru.  Bahkan bisa menyenangkan untuk mencampurkan beberapa musik modern, suara, atau elemen (seperti efek partikel) untuk menciptakan gaya baru dalam game arcade klasik.

 Beberapa contoh hebat dari hal ini adalah Perang Geometri yang mencampur efek modern yang memukau ke dalam permainan arcade vektor-gaya, Space Invaders Extreme di mana game arcade klasik berlapis di atas latar belakang grafis mewah dan diatur ke musik elektronik modern, atau Fez, 2D klasik pixel art platformer yang memungkinkan Anda mengubah dunia dalam ruang 3D.


Senang Membuat-Permainan!

 Itu saja untuk saat ini.  Semoga beruntung di luar sana! Jatuhkan tautan di komentar dan tunjukkan apa yang Anda buat.  Saya ingin melihat Anda mengambil estetika retro.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.