Mencuri teknik animasi permainan untuk melibatkan pengguna

Laman web moden terbenam dalam animasi - selalunya, terlalu banyak . Mereka boleh menggegarkan kandungan dan menggagalkan pengguna. Namun, animasi mempunyai daya tarikan yang tidak dapat dinafikan; Mereka menghidupkan kehidupan ke laman web, menyeronokkan untuk mencipta, dan boleh menjadi sangat mengagumkan. Isu ini tidak semestinya kuantiti , melainkan kaitan animasi ke kandungan laman web. Animasi yang kurang bersepadu merasa dipaksa dan menambah nilai.

Artikel ini mensasarkan pemaju web yang bertujuan untuk menggabungkan animasi yang canggih tanpa mengasingkan pengguna. Saya akan berkongsi teknik yang saya gunakan untuk membuat animasi yang menarik sambil meminimumkan kekecewaan pengguna. Anda mungkin berfikir "tidak menjengkelkan pengguna" adalah bar yang rendah, dan ... anda betul.

Pendekatan saya agak tidak konvensional. Sebagai pemaju web untuk penerbit permainan indie Devolver Digital (bekerjasama dengan Vieko), saya terlibat dalam pembangunan dan reka bentuk. Pada mulanya, saya bergelut dengan reka bentuk. Lakaran jarang diterjemahkan dengan baik kepada pelaksanaan Photoshop, yang membawa kepada restart yang tidak terkira banyaknya. Percubaan untuk memintas reka bentuk dan melompat terus ke dalam kod, bergantung kepada animasi untuk mengimbangi, terbukti sama -sama tidak berjaya. Kemahiran reka bentuk saya kurang.

Kemudian, saya dapati jalan pintas.

Apabila menyampaikan konsep laman web, rakan sekerja dan pelanggan saya menyanjung tentang kemahiran reka bentuk saya (dan menghantar kuki - yang saya makan, maaf!). Rahsia saya?

Saya meminjam banyak dari permainan video.

Saya mencontohi warna permainan, butang, kotak modal, konsep teras, dan juga mekanik permainan. Saya bermain permainan (mereka menyeronokkan!), Menangkap tangkapan skrin dan rakaman, dan kemudian ... Saya menyesuaikan unsur -unsur. Paling penting, saya menyesuaikan animasi.

Walaupun permainan video menawarkan sumber inspirasi yang kaya, pendekatan ini boleh digunakan di seluruh industri. Bagi saya, menyesuaikan animasi permainan membuka potensi penuh setiap laman web.

Tambang emas inspirasi

Devolver Digital menawarkan perpustakaan permainan yang pelbagai: pengalaman naratif yang menenangkan bersama tajuk yang penuh aksi; Permainan secara visual dengan kedalaman tersembunyi, dan permainan seperti Shadow Warrior 3. Setiap permainan secara unik melibatkan pemain, mencipta pengalaman yang tidak dapat dilupakan. Kami berhasrat untuk meniru penglibatan ini di laman web kami, memanfaatkan teknologi web untuk menjalin sambungan sebelum pengguna menyentuh pengawal. Kami pada dasarnya "meminjam" aset, animasi, dan mekanik untuk menawarkan pengguna rasa permainan.

Kajian kes

Mari kita mulakan dengan Olija, permainan mengenai wira yang memakai Harpoon. Ketidaksuburan visual permainan dan kedalaman naratif adalah aspek utama untuk diserlahkan. Laman web ini diperlukan untuk menarik pengguna, merendam mereka dalam cerita dan memberi mereka rasa kawalan.

Laman web menawarkan kelebihan: interaktiviti. Kami memanfaatkan ini melalui pergerakan tetikus, hovers, scrollbars, dan input papan kekunci. Saya suka scrollbars untuk sifat intuitif mereka.

Reka bentuk Olija termasuk animasi pudar gaya yang perlahan, filem yang merangkumi tiga ketinggian Viewport. Ini menetapkan kadar dan nada. Bahagian seterusnya, termasuk unsur-unsur seperti tangkapan skrin dinamik (seperti wira yang berjalan melalui hutan), memperkuat cerita dan mempamerkan gaya permainan. Animasi Pixel Art, berdasarkan lembaran sprite, memerlukan animasi kedudukan lembaran sprite bersama -sama Transform Properties.

Ape keluar, dengan perasaan filem tindakannya, mengilhami laman web yang mempamerkan adegan yang lengkap, membiarkan pengguna membayangkan tindakan terdahulu. Bar scrlbar mengawal penerokaan kamera. Walaupun ia mungkin kelihatan sebagai kanvas WebGL 3D, ia sebenarnya diposisikan div dengan transformasi 3D.

Masukkan laman web Gungeon meraikan pengalaman pemain, menggunakan nostalgia untuk mempromosikan permainan yang berkaitan.

Elemen permainan yang unik

Hero Loop, dengan gelung permainan yang mudah tetapi menarik, mengilhami laman web yang tidak terhingga. Bar scroll adalah dilumpuhkan sementara semasa pertempuran, mempamerkan perkembangan permainan. Hasil pertempuran adalah dinamik, sambil menambah kebolehpadanan.

Laman web Boomerang X dan Shadow Warrior secara langsung mengintegrasikan rakaman permainan, mewujudkan elemen interaktif. Kandungan Shadow Warrior berjabat dengan kesan dalam permainan; Logo Boomerang X mencerminkan pergerakan Boomerang dalam permainan.

Devolver Tumble Time's Tumbler Mechanic menyampaikan cabaran penting. Percubaan awal menggunakan matterjs gagal; Akhirnya, ThreeJs digunakan untuk mencapai ketidakstabilan yang dikehendaki.

Menyelam yang lebih dalam: Phantom Abyss

Laman web Phantom Abyss, dengan berat hanya 4MB, mempamerkan banyak teknik ini. Animasi halus (blok peralihan, pudar pudar, air terjun animasi, zarah debu, dan lain -lain) Tambah kedalaman dan halus mencadangkan kerumitan tersembunyi permainan. SVGator digunakan untuk menghidupkan SVGs (obor, rambut, mata).

Inspirasi dari dalam

Contoh -contoh ini menyerlahkan pendekatan kami terhadap animasi. Katalog Permainan Beragam Devolver Digital memberikan inspirasi yang tidak berkesudahan (lihat Ragnorium, Heave Ho, dan Gato Roboto). Kerja Vieko mengenai kehidupan minit dan enapcemar juga mencontohkan pendekatan ini.

Kami terutamanya menggunakan vercel, nextjs, gerakan framer, dan react-three-fiber. Walaupun banyak alat lain wujud, ini telah mempermudah aliran kerja kami.

Kelimpahan alat dan teknik boleh menjadi sangat menggembirakan, yang membawa kepada tiruan dan bukannya inovasi. Daripada memberi tumpuan kepada mereplikasi kerja orang lain, kita harus mengutamakan mewujudkan animasi yang sangat berkaitan dengan kandungan itu sendiri, memalsukan pengalaman pengguna yang unik dan tidak dapat dilupakan.

Atas ialah kandungan terperinci Mencuri teknik animasi permainan untuk melibatkan pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!