efek terowongan cocos2d

12

Saya ingin membuat efek terowongan serupa di COCOS2D (iOS). Adakah yang bisa menyarankan petunjuk?

Gambar Ref

ref Video 1

ref Video 2

Sampai sekarang saya telah mencoba dengan beberapa sprite bentuk cincin dengan skala menurun dan pusat posisi ke titik yang sama dan menjaga Z menurun juga untuk setiap sprite yang lebih kecil.

Dengan itu, menganimasinya dengan CCScaleTo dan mengubah ukuran menjadi 2.0 dengan durasi animasi tetapi tidak mendekati efek terowongan yang ditunjukkan dalam referensi.

Terima kasih, sam

Saurabh Passolia
sumber

Jawaban:

10

Saya menemukan deskripsi implementasi dari penulis efek ini:

Pasti banyak pekerjaan untuk menciptakan ilusi kedalaman pada bidang 2D.

Prinsipnya sangat mudah: lingkaran mulai di tengah layar dengan skala 0. Kemudian lingkaran pertama terowongan mulai penskalaan secara proporsional dengan waktu yang telah berlalu (penskalaan linear tidak berfungsi) dan setelah beberapa waktu lingkaran kedua mulai penskalaan , lalu tanggal 3, dan 4 dan seterusnya.

Anda kemudian menurunkan secara proporsional nilai alpha untuk lingkaran (yang di bagian paling belakang memiliki nilai alpha lebih rendah dari yang di depan untuk memberikan ilusi blur), Anda menentukan jalur yang harus diikuti setiap lingkaran, menggerakkan X dan Y Koordinat itu, maka Anda meletakkan pesawat ruang angkasa di tengah layar. Memiringkan perangkat membuat terowongan bergeser ke kiri dan kanan, atas dan bawah (tetapi itu memberi kesan bahwa pesawat ruang angkasa bergerak sebagai gantinya!).

Setelah lingkaran keluar dari layar, mereka dengan cepat memudar dan dimasukkan kembali ke posisi awal (untuk menghemat memori jadi saya tidak perlu membuat lingkaran baru tapi saya menggunakan yang sama).

Maaf tentang bahasa Inggris saya, tapi saya harap itu menjelaskan ide umum :)

Saurabh Passolia
sumber
1

Anda hampir sampai di sana dengan memiliki beberapa sprite ring dengan penurunan nilai Z dan skala. Hanya saja, jangan memusatkan mereka semua.

Anda perlu melacak titik di mana Anda ingin terowongan mencapai cakrawala acara yang jauh. Anda dapat memindahkan titik itu sepanjang waktu sesuka Anda.

Kemudian, ketika Anda menempatkan setiap sprite baru, letakkan di titik itu, skala itu kecil, atur opacity sesuka Anda, lalu mulai CCSpawndengan CCScaleTodan CCFadeTo, misalnya:

sprite->runAction(CCSpawn::create(
    CCScaleTo::create(2.0f, 1.5f),
    CCFadeTo::create(5.0f, 255),
    nullptr));

Pra-buat semua sprite dan putar mana yang ada di belakang agar tetap efisien.

Nathanael Weiss
sumber
1

Saya mungkin akan mencoba untuk mengurutkannya dengan lapisan latar belakang dan efek partikel. Anda bisa menguji efek pada perancang partikel dan memainkannya di lapisan backgroung sesudahnya.

Anselm Scholz
sumber
0

Sejujurnya saya tidak berpikir bahwa gambar dirender menggunakan kamera 2D. Sepertinya game dirender menggunakan sistem rendering 3D. Tetapi karena Anda ingin menggunakan cocos2d, Anda perlu mensimulasikan sendiri matriks transormasi 3D. Ini adalah ide untuk memulai: Anda tahu dalam adegan 3D, setiap objek didefinisikan oleh 3 nilai skalar, x, y, dan z. Metode paling sederhana yang dapat Anda gunakan adalah scaling seperti yang Anda sarankan, tetapi tidak seperti yang Anda terapkan! ccScaleToakan menghasilkan penskalaan linear seiring waktu, yang tidak akan menghasilkan nuansa 3D. Anda bisa mulai dengan objek penskalaan dengan nilai 1/z. Ini entah bagaimana identik dengan matriks proyeksi paling sederhana yang dapat Anda pikirkan! jika Anda merasa hal itu tidak memuaskan Anda, lihatlah matriks proyeksi yang lebih modern dan lebih kompleks .

Catatan: mengimplementasikan matriks proyeksi kustom di cocos2D akan sedikit kotor. jika Anda benar-benar tidak menyukai efeknya, saya sangat menyarankan untuk mengganti mesin Anda menjadi satu dengan dukungan 3D.

Ali1S232
sumber
Saya tidak ingin memperkenalkan 3d untuk membuat hal-hal lebih kompleks tetapi efek ini dibuat di cocos2d untuk menampilkan tampilan terowongan palsu (saya punya percakapan dengan penulis permainan ini di masa lalu)
Saurabh Passolia
0

Inilah cara saya melakukannya, dalam pseudo-code

Aktifkan Tunnel-effect:

  1. Buat CCRepeatForever (CCFunc (createCircle))
  2. Tambahkan node ke adegan Anda yang disebut "ViewNode"

createCircle ()

  1. Buat layer, posisi di tengah adegan. Tambahkan sebagai anak ke "ViewNode".
  2. jalankan tindakan: CCSequence (CCEaseExponentialIn (CCScaleTo), CCRemoveSelf)
  3. Letakkan barang-barang di lapisan Anda, yaitu cirkels, musuh, pesawat ruang angkasa, apa pun.

Kontrol (dengan paralaks)

  1. Untuk semua lapisan dengan efek terowongan (yaitu anak-anak dari ViewNode)
  2. perbarui posisi jangkar berdasarkan posisi sentuh.

Posisinya adalah Vanishing Point, oleh karena itu, Anda tidak dapat memindahkan lapisan tanpa memindahkan titik hilang. Namun, jika Anda memindahkan titik jangkar, layer tampak bergerak, tetapi Vanishing Point tetap sama - ini menciptakan efek paralaks, karena memindahkan ccp (0,2,0.2) pada lapisan dekat (skala besar) memiliki efek lebih besar daripada memindahkan yang sama pada lapisan yang jauh.

Anda membungkus semuanya dalam lapisan dengan ukuran yang sama, untuk memastikan bahwa reposisi jangkar menciptakan gerakan yang sama di semua lapisan.

Mark Marijnissen
sumber