Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. JavaScript
Gamedevelopment

Bagaimana Mengurangkan Permainan HTML5 Anda untuk Pertandingan Js13kGames

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

Final product image
What You'll Be Creating

Seperti yang anda tahu, edisi ketiga pertandingan js13kGames di sini: permulaan rasmi ditetapkan pada 13 Ogos, 13:00 CEST. Js13kGames adalah persaingan untuk pemaju permainan HTML5 di mana bahagian yang menyeronokkan dan mencabar compo adalah menjaga keseluruhan permainan anda di bawah 13KB.

Artikel ini harus menjadi titik permulaan yang bagus jika anda ingin mengetahui bagaimana untuk menghasilkan aset, dan meminimumkan dan memampatkan kod tersebut, sehingga anda dapat memenuhi persyaratan untuk persaingan. Saya juga akan menyediakan anda alat yang boleh membantu anda dalam projek sehari-hari anda jika anda perlu menyimpan sumber cahaya anda.

Apa Tepatnya Pertandingan js13kGames?

Pertandingan js13kGames didedikasikan kepada pemaju permainan HTML5 dan pemrogram JavaScript yang ingin menguji kemahiran mereka dalam pertempuran dengan pemaju lain, mengikut peraturan, mematuhi tarikh akhir, dan memenangi beberapa hadiah. Pertandingan berlangsung dari 13 Ogos hingga 13 September - anda mempunyai seluruh bulan untuk membuat kod dan menyerahkan entri anda. Tidak ada perpustakaan luar atau sumber seperti Font Google dibenarkan, walaupun; semua yang anda ingin gunakan dalam permainan anda mesti masuk ke dalam 13 kilobyte pakej ZIP. Pertandingan ini adalah percuma untuk semua, tetapi kod sumber harus dihoskan di GitHub supaya orang lain dapat belajar daripadanya di masa depan.

Batas 13 kilobyte sangat ketat, tetapi batasan sering menimbulkan kreativiti: anda perlu berhati-hati memikirkan bagaimana untuk melaksanakan idea anda, kerana setiap bait benar-benar penting.

Mengapa Mengambil Bahagian?

Tujuan utama compo adalah menyeronokkan. Tarikh akhir membantu untuk bersenang-senang, kerana anda perlu menamatkan projek itu pada satu ketika dan tidak boleh menyimpannya tanpa henti selama-lamanya.

Mengambil bahagian dalam pertandingan meningkatkan kemahiran anda, membantu anda menguruskan masa yang anda habiskan untuk projek itu, dan memberi anda peluang untuk bekerjasama dengan komuniti. Tambahan pula ada peluang anda dapat memenangi banyak hadiah menarik, menjadi terkenal, dan akhirnya mendapat beban timba wang sebagai pemaju permainan. Apa lagi yang anda perlukan?

Petua dan cara

Mari kita hubungkan tip dan trik khusus yang boleh digunakan untuk meminimumkan kod sumber permainan anda dan semua aset yang digunakan, dari pengurangan JavaScript, melalui pemotongan saiz imej, ke tahap prosedural dan penjanaan audio.

Petua Umum

Anda mempunyai sebulan untuk mengodkan permainan anda, jadi anda tidak perlu menghabiskan malam tanpa tidur sepanjang hujung minggu minum kopi dan minuman tenaga untuk bersaing dengan orang lain. Anda boleh bekerja pada kadar anda sendiri, setiap kali anda mempunyai masa dan bila-bila masa anda merasa seperti itu.

Oleh kerana sekatan yang ketat pada saiz pakej akhir, hampir mustahil untuk menggunakan apa-apa rangka kerja. Sudah tentu, jika anda boleh menyediakan satu set kecil fungsi penolong yang akan masuk ke dalam had 13 kilobyte, anda lebih daripada dialu-alukan untuk melakukan itu.

Begitu juga dengan gambar-screenshot permainan sering lebih besar daripada permainan itu sendiri, jadi anda perlu pintar. Anda mungkin akan menghasilkan semuanya dengan sendiri, atau menggunakan aset yang sangat kecil, dimampatkan; itulah cara terbaik untuk menyesuaikan keseluruhan permainan ke dalam had saiz.

Kod Penggabungan JavaScript

Inti utama permainan JavaScript anda adalah kod sumber-anda mungkin dapat menjana segala-galanya dengan sempurna, tanpa menggunakan sumber-sumber lain seperti imej atau bunyi, jadi mengoptimumkan kod ini sangat penting.

Perkara yang paling mudah dilakukan adalah untuk memedulikan kod tersebut, yang bermaksud ia akan dilucutkan ruang putih (tab, ruang, baris baru, dan sebagainya), tanpa kod itu sendiri berubah.

Anda boleh mengambilnya lagi dengan menggunakan alat lain yang akan mengubah kod sumber asal anda untuk memampatkan saiznya sebanyak mungkin, dengan menggunakan nama pemboleh ubah yang lebih pendek dan cara lain seperti itu. Sebagai kesan sampingan, alat ini juga akan menyembunyikan kod sumber dan menjadikannya  tidak boleh dibaca-yang dipanggil obfuscation. Salah satu peraturan persaingan utama ialah anda harus mempunyai versi penyampaian anda yang boleh dibaca pada GitHub, jadi memerah setiap bait dengan membuat kod dalam pakej zip tidak boleh dibaca adalah benar-benar halus.

Alat seperti Google Closure Compiler, YUI Compressor atau UglifyJS, dan perkhidmatan dalam talian seperti Rater Pemampat, JSMini atau JSObfuscate, boleh membantu anda memampatkan kod anda sebanyak mungkin. Gunakannya untuk keuntungan anda.

Pemampatan Imej

Tidak akan ada banyak fail imej dalam permainan anda jika anda mahu menyesuaikannya dengan 13 kilobytes, tetapi tetap, jika anda ingin menggunakan imej, anda perlu memampatkannya sebanyak mungkin. Terdapat alat dalam talian seperti TinyPNG dan Optimizilla, aplikasi yang boleh dipasang seperti ImageOptim, alat baris arahan, dan membina skrip untuk melakukannya, jadi anda akan dapat mencari sesuatu yang sesuai dengan aliran kerja anda.

Anda juga boleh kod permainan anda dengan resolusi rendah dengan imej kecil dan kemudian skala semuanya, atau membuang semua imej dan menghasilkan segala-galanya di kanvas dari awal.

Penjanaan Tahap Prosedural

Memandangkan ruang terhad yang ada, adalah bijak untuk berfikir tentang meramalkan tahap dalam permainan anda. Cara terbaik untuk mengekalkan nilai ulangan tinggi permainan anda adalah untuk menghasilkan tahap anda secara procedurally, sehingga bukannya mempunyai satu atau dua tahap tetap, anda dapat memberikan pengalaman yang berbeda setiap kali permainan dimainkan.

Contoh terbaik dalam kategori itu ialah roguelikes yang menggunakan mazes dan penjara bawah tanah untuk tahap mereka. Anda boleh menjana dunia yang luas dari hanya beberapa keping kecil, dan ia boleh berbeza setiap kali anda memulakan permainan. Terima kasih kepada pendekatan ini, pemain anda tidak akan bosan terlalu cepat.

Penjanaan audio

Menambah audio ke permainan anda meningkatkan pengalaman keseluruhan, tetapi dengan lagu biasanya berat pada 5MB atau lebih, bagaimana anda boleh memadankan mana-mana ke dalam entri js13k anda? Jsfxr untuk penyelamatan!

Daripada mengecut MP3, anda boleh menghasilkan muzik dan kesan bunyi anda sendiri. Jsfxr adalah port JavaScript di perpustakaan sfxr, dan digunakan secara meluas oleh peserta pertandingan tahun lepas, yang bermaksud pertempuran itu diuji dan memberikan hasil yang hebat.

Membina Sistem

Selain alat yang telah disebutkan, anda boleh membantu diri sendiri dengan mengautomasikan beberapa tugas yang anda miliki; membina sistem seperti Grunt atau Gulp boleh membuat persediaan semua aset anda lebih mudah.

Sekiranya anda seorang peminat Gulp, terdapat pelbagai jenis tugas membina untuk dipilih: Jack Rugile mencadangkan kombo gulp-uglify + gulp-htmlmin + gulp-zip + gulp-filesize sementara Csaba Csecskedi menambah gulp-imagemin koleksi ini. Anda tidak perlu menggunakannya jika anda tidak selesa dengan Gulp atau hanya mahu bekerja dengan cara yang baik, tetapi set ini dapat meningkatkan aliran kerja keseluruhan anda untuk kemasukan js13kGames anda.

Kod Boilerplate

Satu-satunya keperluan struktur di samping had saiz adalah bahawa anda mesti mempunyai file index.html dalam direktori utama pakej-semua yang lain adalah pilihan. Anda boleh menyusun kod anda seperti mana yang anda suka, termasuk folder untuk JavaScript, CSS dan fail imej secara berasingan atau hanya meletakkan semuanya di dalam fail HTML dan melupakan segala yang lain. Anda boleh melakukan segala-galanya dengan tangan, atau menggunakan penyemak imbas, meningkatkan CSS anda menggunakan KURANG atau SASS, atau bahkan memasukkan kod anda dengan ESLint. (Itulah yang disediakan Florent Cailhol dalam repositori boilerplate js13k eksperimennya di GitHub.) Sekali lagi: ini semua boleh membantu anda, tetapi tidak ada yang diperlukan.

Pilih jenis hak permainan

Ini mungkin jelas, tetapi jangan lupa dengan berhati-hati memilih jenis permainan yang sesuai untuk masuk dalam 13 kilobytes, kerana sesetengah permainan lebih sukar untuk dibina (dan disimpan kecil) daripada yang lain. Saya tidak mengatakan bahawa anda tidak boleh membuat penembak orang pertama 3D, strategi masa nyata, simulator bandar, permainan perlumbaan 3D, pengurus lampu lalu lintas, atau bahkan berjoging permainan blok kuning telanjang seperti beberapa pemaju gila pada tahun-tahun yang lalu, tetapi yang luas Kebanyakan penyertaan adalah mengenai permainan mudah dengan satu mekanik teras yang anda bungkus permainan anda, beberapa imej yang dihasilkan, dan bunyi kadang-kadang mudah.

Ingat bahawa menamatkan sesuatu adalah lebih baik daripada mempunyai projek yang belum selesai dan belum selesai. Ikut inisiatif One Game a Bulan, berpegang kepada tarikh akhir dan cuba menyelesaikan kemasukan anda dalam masa. Pastikan ia berada dalam ruang lingkup serta saiznya; jika anda gembira dengan prototaip kerja dan mempunyai ruang kosong, anda sentiasa boleh menambah ciri-ciri baru untuk permainan di kemudian hari. Poland projek anda seberapa banyak yang mungkin dan anda akan dapat memenangi pertandingan dengan membina permainan seperti SpacePi atau Radius Raid.

Belajar Daripada Orang Lain

Ini adalah petua dan teknik asas yang boleh membantu anda mengodkan permainan anda untuk pertandingan js13kGames—tetapi anda tidak perlu menggunakannya. Terdapat banyak alat yang boleh anda gunakan dalam permainan anda untuk memastikannya dalam had saiz; ia bergantung pada pilihan anda. Sekiranya anda tidak mempunyai pengalaman, perkara yang paling baik adalah untuk belajar dari orang lain.

Anda boleh menyemak kod sumber penyertaan dari tahun terdahulu, mainkan permainan dan melihat apa yang mungkin dalam had, menggali catatan blog yang menerangkan pengalaman orang, dan membaca kod sumbernya dan belajar dari itu. Tanya soalan melalui media sosial, bincangkan idea dan masalah anda dengan orang lain. Itulah keindahan persaingan—anda bukan sahaja; anda boleh bekerjasama dengan orang lain, membentuk pasukan, dan meningkatkan kemahiran anda dalam masa yang singkat.

Ringkasan

Semua alat dan perkhidmatan yang disenaraikan dalam artikel ini akan membantu anda mempersiapkan pertandingan js13kGames. Adalah penting untuk tidak membetulkan perhatian anda pada alat sahaja; anda juga harus melihat apa yang dilakukan oleh orang lain, belajar dari pengalaman mereka, dan menjadi sebahagian daripada komuniti.

Jika anda mempunyai cara yang berbeza untuk mempersiapkan diri untuk persaingan, sila kongsi ulasan tersebut! Mari kita semua manfaat, belajar dan bantu satu sama lain. Lagipun, pertandingan itu mula bersenang-senang dan menghiburkan, dengan sedikit pembelajaran di sepanjang jalan.

Sumber

Semak sumber tambahan ini untuk pertandingan ini:

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.