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

Pergi Sekolah Lama: Membuat Permainan Dengan Estetika Retro

by
Length:LongLanguages:

Malay (Melayu) translation by Meyria (you can also view the original English article)

Semuanya tua lagi baru, dan permainan retro lebih popular dari sebelumnya. Didorong oleh nostalgia dan banyak permainan gaya kasual dan arked pada peranti iOS dan Android, permainan sekolah lama membuat kemunculan semula. Dalam tutorial ini, saya akan memberi anda beberapa tip untuk mencipta permainan bertema retro yang berjaya.


Memilih Gaya Retro

Apa yang kita maksudkan apabila kita bercakap tentang permainan 'retro'? Tidak ada definisi yang konkrit, tetapi saya biasanya memikirkan permainan yang dibuat sebelum tahun 1990. Ini termasuk permainan dari konsol seperti GameBoy, NES, Atari 2600, dan Commodore 64, serta permainan arked klasik seperti Pac Man, Centipede, dan Space Invaders.

Kesemua contoh menggunakan grafik blocky, pixelated, bitmap (atau 'raster'). Ini adalah jenis permainan yang mungkin teringat kepada kebanyakan orang apabila mereka memikirkan permainan retro.

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

Tetapi permainan video terawal sebenarnya menggunakan grafik vektor. Permainan seperti Battlezone, Asteroid dan Tempest diberikan dengan garis-garis bercahaya yang terang dan bukannya piksel blocky.

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

Satu lagi jenis permainan orang lama yang digunakan untuk bermain adalah permainan mudah alih yang menggunakan paparan LCD monokrom dan mekanik permainan yang sangat mudah.

Retro Games with LCD Graphics
Grafik LCD: Donkey Kong Jr. (Game & Watch), Pabrik Simen Mario (Game & Watch)

Dalam tutorial ini, kita akan membincangkan tentang permainan grafik raster yang lebih popular, tetapi saya menyebut jenis permainan lain kerana mereka tidak sering disunting, dan saya fikir terdapat banyak peluang untuk pereka permainan melakukan sesuatu yang benar-benar keren dengan gaya mereka.


Mewujudkan Palet Warna

Untuk membuat rupa retro yang meyakinkan, anda akan mahu bekerja dengan set warna yang terhad.

Konsol permainan sekolah lama hanya dapat memaparkan beberapa warna yang terhad. Bergantung pada sistem, grafik akan ditunjukkan dalam warna hitam dan putih, skala kelabu, atau 8- atau 16-bit. Anda boleh melihat contoh palet warna yang tepat dari sistem tertentu di Wikipedia, tetapi ia tidak penting untuk memilih warna sejarah yang tepat selagi anda mengekalkan gaya yang konsisten dalam permainan anda.

Kami tidak menghadapi batasan perkakasan yang sama yang kami lakukan pada masa lalu, tetapi mengekalkan palet anda terhad kepada beberapa warna yang dipilih dengan cermat tidak hanya akan menekankan estetik retro, ia juga akan membantu menentukan identiti permainan anda. Lihat kedua-dua contoh palet warna dari Super Mario Bros .:

Color Palettes from Super Mario Bros.

Warna-warna sangat berbeza, anda hampir dapat mengenali permainan itu hanya dari swatch warna.
David Sommers mempunyai koleksi palet permainan klasik di ColourLovers.com.

Warna-warna tepat yang anda pilih akan bergantung pada tema dan suasana permainan anda, tetapi jika anda meluangkan masa untuk memilih satu set warna yang bagus permainan anda akan terasa ikonik sebagai klasik. Lihatlah contoh-contoh moden ini:

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

Jika anda menghadapi masalah untuk memilih warna yang berfungsi dengan baik, lihat tutorial hebat ini oleh Tyler Seitz, Memilih Palet Warna untuk Artwork Permainan Anda.


Memilih Saiz Piksel

Permainan raster retro paling mudah diiktiraf oleh piksel tebal besar mereka, dari masa apabila resolusi skrin jauh lebih rendah. Dalam dunia HD skrin hari ini dan paparan Retina, piksel fizikal pada peranti kami hampir tidak dapat dilihat - tidak cukup menonjol untuk melihat rupa blocky retro.

Scaling Up a Game Sprite
Dalam contoh ini setiap piksel dari grafik grafik kami dipaparkan pada skrin dengan empat piksel fizikal.

Untuk mengambil kira ini, kita perlu menggunakan beberapa piksel fizikal untuk memaparkan setiap piksel yang kelihatan dalam grafik permainan kami.

Different Scale Factors

Anda boleh memutuskan apakah level scaling sesuai untuk permainan anda bergantung pada bagaimana blocky yang anda inginkan permainan anda. Biasanya skala sehingga dua atau tiga kali saiz normal memberikan kesan yang baik. Perlu diingat bahawa semakin besar anda pergi, semakin kurang anda akan dapat muat pada skrin.

Saya mengesyorkan agar anda sentiasa membiarkan enjin permainan anda melakukan skala pensel anda untuk anda. Ini bermakna bahawa semua aset dan teks anda ditarik pada 100% (kecil) dan permainan hanya skala seluruh kanvas permainan untuk sampai ke saiz akhir. Anda sebenarnya boleh menarik aset dengan piksel yang lebih besar, tetapi ini akan meningkatkan saiz fail dan masa beban, dan juga dapat memberi kesan negatif pada kinerja permainan.

Pixel Scale Inconsistencies
Saiz piksel yang tidak konsisten tidak kelihatan agak betul.

Cuba untuk skala aset anda secara manual juga boleh menyebabkan ketidakkonsistenan dalam skala piksel anda. Dalam contoh di atas, perhatikan bagaimana piksel dalam tajuk permainan adalah besar berbanding dengan piksel kecil dalam teks butang 'Main Sekarang'. Juga, watak permainan kami adalah blockier daripada permata atau lantai gua. Sesetengahnya adalah perbezaan yang halus tetapi mereka semua menambah sehingga membuat permainan kelihatan sedikit 'mati'.

Neven Mrgan (co-pencipta Insiden) bercakap sedikit lebih lanjut mengenai ini di blognya.


Lukisan Seni Piksel

Mewujudkan seni piksel yang hebat boleh menjadi sangat mencabar. Ia mengambil banyak amalan, dan merupakan topik yang terlalu panjang untuk dipenuhi sepenuhnya dalam tutorial ini. Berikut adalah beberapa pautan untuk memulakan anda:

Lukisan & Alat Animasi

Ramai orang menggunakan program grafik biasa seperti Photoshop, Gimp, atau juga MS Paint untuk menarik seni pixel.

Saya mendapati ia mengecewakan untuk menggunakan Photoshop sebaik sahaja saya mula cuba menghidupkan watak dan meletakkan jubin lancar. Jadi, saya membuat alat yang dikenali sebagai Pickle untuk membantu mengisi beberapa fungsi yang hilang daripada editor tradisional, seperti pratonton animasi langsung, pratonton jubin lancar, dan paparan jubin rupa bumi.

Pickle Sprite Editor

Pickle mempunyai set ciri terhad dan tidak memenuhi keperluan semua orang. Nasib baik terdapat aplikasi serupa lain seperti Pyxel Edit, ASEPRITE dan GraphicsGale.

Tutorial

Terdapat banyak tutorial seni pixel yang bagus dalam talian. Berikut adalah beberapa yang saya dapati membantu pada masa lalu:


Reka Bentuk Karakter

Merancang watak-watak yang meyakinkan dengan grafik lo-res boleh menjadi sangat sukar. Bagaimana anda boleh menggambarkan butiran yang mencukupi untuk mencipta watak yang unik dengan begitu banyak piksel dan warna untuk berfungsi?

Seperti seni lukisan piksel secara umum, reka bentuk watak adalah sesuatu yang memerlukan kesabaran dan amalan. Kita boleh belajar beberapa strategi membantu dari watak-watak permainan klasik.

Gunakan Batasan untuk Kelebihan Anda

Mario Mario

Lihatlah rakan kami Mario di sini. Perhatikan bagaimana beberapa piksel digunakan untuk menggambarkan watak manusia yang dikenali. Tiga warna, tiada garis besar, tiada teduhan. Bagaimana anda boleh menarik wajah dengan batasan-batasan ini? Lihatlah bagaimana piksel yang menarik misai Mario juga berfungsi untuk menentukan hidung dan mulutnya juga.

Ia juga sukar untuk menarik tangan Mario pada tahap terperinci ini tanpa menggabungkannya ke dalam tubuhnya, menjadikan tubuhnya kelihatan seperti gumpalan kecil. Pencipta Mario menyelesaikan masalah ini dengan memakai baju pengantin. Lihat bagaimana garis pakaiannya dengan jelas memisahkan tangannya dari seluruh tubuhnya? Genius!

Dalam hal ini, menambahkan sifat fizikal tertentu kepada watak (rambut wajah dan pakaian) sebenarnya menjadikannya lebih mudah untuk menariknya dalam batasan grafis. Keterbatasan itu sendiri memaklumkan reka bentuk watak itu.

Pergi Abstrak

Pac-Man and Ghosts

Teknik lain untuk menangani batasan grafis adalah untuk abstrak. Kenapa mengganggu cuba menarik watak manusia yang dikenali, jika anda tidak perlu? Lihat Pac-Man di sana. Dia bukan sesuatu yang dikenali. Dia hanya gumpalan kuning dengan mulut.

Pac-Man adalah watak yang tidak dapat dilupakan walaupun kekurangan sifat fizikalnya. Dia mendapat personaliti dari permainan - cara dia bergerak melalui labirin, kesan bunyi dan cara dia berinteraksi dengan musuh-musuhnya.

Siapa kata anda perlu mempunyai watak manusia dalam permainan anda? Mengapa tidak membuat Pac-Man, Q * bert, atau Qix seterusnya?


Menu dan Skor Teks

Apabila membuat grafik untuk skrin tajuk anda, menu dalam permainan dan elemen teks lain seperti skor yang anda perlukan untuk tetap konsisten dengan gaya aset grafik anda. Ini bermakna mengekalkan palet warna yang sama, saiz piksel dan gaya seni.

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

Kebanyakan fon direka untuk menjadi anti alias (terlicin) apabila dipaparkan pada skrin. Ini bermakna jika kita cuba untuk meniup mereka untuk sepadan dengan saiz piksel kita, kita akan melihat banyak piksel yang bising di sekeliling tepi huruf. Ia juga tidak sepadan dengan estetika yang kita akan lakukan. Semuanya lembut dan kabur bukannya segar dan keras.

Aliased Text
Gotham Bold tanpa anti-aliasing

Jadi kami mahu memaparkan fon tanpa anti-aliasing. Tetapi hanya memaparkan font normal tanpa melicinkan biasanya akan kelihatan dahsyat. Mereka hanya tidak direka untuk bekerja seperti itu. Lihat bagaimana funky dan sukar dibaca pada 100%? Apabila kita meletupkannya, kita dapat melihat banyak piksel yang sesat dan pukulan tidak sekata.

Pixel Font
Bionika Black oleh Atomic Media

Jawapannya ialah sentiasa menggunakan font yang direka untuk dipaparkan tanpa anti-aliasing. Mereka membaca baik dan bersih pada saiz yang kecil, dan mempunyai rupa retro yang hebat ketika kita meledakkan mereka besar.

Beberapa fon pixel kegemaran saya dibuat oleh Matthew Bardram Media Atom.

Satu kaveat untuk menggunakan fon piksel adalah bahawa setiap fon direka untuk berfungsi pada saiz tertentu sahaja. Pastikan anda hanya menggunakan font pada saiz tertentu ini atau berbilang saiznya. Jadi jika anda menggunakan font yang direka untuk berfungsi pada 10pt, ia juga akan kelihatan baik pada 20 atau 30pt, tetapi tidak pada saiz di antara.


Mekanik Permainan

Fikirkan tentang jenis mekanik permainan yang akan berfungsi dengan baik dengan gaya seni anda. Memilih mekanik klasik yang ringkas akan membantu pemain anda masuk ke suasana retro. Beberapa mekanik permainan klasik adalah penembak ruang (Asteroid, Space Invaders), platformer (Super Mario Bros, Donkey Kong), dan permainan petualangan (Adventure, Zelda).

Perlu diingat bahawa gaya seni terhad anda akan menjadikannya lebih sukar bagi anda untuk menyampaikan maklumat yang rumit kepada pemain, jadi mekanik mudah boleh menjadi manfaat besar.

Bagaimana mudah anda boleh membuat permainan anda? Bolehkah anda merancang permainan yang menggunakan hanya satu butang untuk kawalan?
Permainan satu butang berfungsi hebat pada peranti berasaskan sentuhan, kerana pemain hanya boleh merosakkan pada skrin tanpa perlu bimbang tentang memukul kawasan butang bukan sentuhan.

Banyak permainan gaya pelari yang tidak berkesudahan menggunakan skema kawalan satu butang (Canabalt, Jetpack Joyride, Tiny Wings). Bolehkah anda tampil dengan gaya permainan yang berbeza yang berfungsi sama dengan hanya satu butang untuk kawalan?


Kesan Penyulingan

Jika anda pernah memainkan salah satu permainan arked sekolah kegemaran anda dalam emulator pada komputer anda, anda mungkin menyedari bahawa ia tidak merasa sama. Segala-galanya agak terlalu segar dan bersih pada pemantauan komputer anda berbanding dengan pemantauan arca, kelipan, diputarbelitkan monitor arcade, atau televisyen CRT lama anda dari zaman kanak-kanak.

Sesetengah orang mungkin fikir ia adalah perkara yang baik yang kita tidak perlu bersabar dengan artifak distorsi zaman dahulu, tetapi ia boleh menjadi keseronokan untuk menambah sedikit kebodohan semula ke dalam permainan yang diilhami retro.

Berikut adalah beberapa contoh cara anda boleh meniru skrin CRT lama:

CRT Screen Effects

Baris Imbas: Anda boleh menggunakan grafis statik garis putih yang nipis, sempit, dan sempit untuk mensimulasikan garisan imbasan CRT. Hanya lapisan mereka di atas permainan anda. Laraskan opacity dan blend mode untuk mencapai gaya dan keamatan yang anda inginkan.

Bunyi bising: bunyi Gaussian boleh menambah tekstur yang bagus untuk permainan anda. Idealnya kebisingan akan dinyanyikan, tetapi imej statik akan berfungsi dengan baik jika terus menghidupkan bunyi mempengaruhi prestasi permainan anda.

Blur: Blur yang sangat sedikit menambah kelembutan yang baik kepada imej. Jangan pergi terlalu jauh dengan yang ini; anda masih mahu dapat melihat piksel.

Warna Fringing: Salah satu kesan sekolah kegemaran saya ialah menambah sedikit warna RGB fringing. Anda boleh melakukan ini dengan memisahkan kanvas permainan ke saluran berasingan untuk merah, hijau dan biru dan memindahkan mereka sedikit daripada penjajaran. Kesan ini kelihatan sangat baik apabila ia animasi, tetapi ia boleh menjadi prosesor yang sangat intensif, jadi anda mungkin perlu mengehadkan penggunaannya. Saya mempunyai satu lagi tutorial di mana saya menunjukkan bagaimana untuk melaksanakan kesan dengan AS3: Buat Kesan Penyulingan CRT Retro Menggunakan Peralihan RGB.

Gabungan: Campurkan pelbagai kesan untuk keseronokan maksimum!

Animated CRT Screen Effects

Anda juga boleh menambah bar roll animasi untuk mensimulasikan CRT yang tidak berfungsi.

Permainan Flash Cronus X melaksanakan banyak kesan ini dengan baik semasa peralihan menu. Ini adalah penyelesaian yang baik jika anda bimbang tentang kesan yang memberi kesan negatif terhadap prestasi permainan.


Inovasi

Jangan terlalu terputus oleh kekangan permainan sekolah lama. Ia lebih penting untuk permainan untuk bersenang-senang mempunyai retro 'rasa' daripada menjadi sejarah yang tepat.

Dan cuba untuk tidak mencipta penembak ruang atau platformer klasik. Tambah beberapa inovasi untuk menjadikan permainan anda unik. Gunakan estetika retro sebagai titik permulaan, tetapi tambahkan beberapa gaya dan unsur unik anda sendiri untuk mencipta sesuatu yang baru. Ia juga boleh bersenang-senang untuk dicampur dalam beberapa muzik moden, bunyi, atau unsur-unsur (seperti kesan zarah) untuk mencipta permainan baru dalam permainan arked klasik.

Beberapa contoh hebat ini adalah Geometry Wars yang menggabungkan kesan moden yang mempesonakan ke dalam permainan arked gaya vektor, Space Invaders Extreme di mana permainan arcade klasik berlapis di atas grafik latar belakang yang mewah dan ditetapkan untuk muzik elektronik moden, atau Fez, 2D klasik platformer art pixel yang membolehkan anda mengubah dunia dalam ruang 3D.


Happy Game-Making!

Itu sahaja buat masa ini. Nasib baik di luar sana! Jatuhkan pautan dalam komen dan tunjukkan kepada saya apa yang anda buat. Saya suka 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.