Bagaimana Lapisan, Pindah dan Bawa Grafik ke Hadapan

Menggunakan Corona SDK untuk Manipulasi Grafik

Komponen utama mewujudkan, memanipulasi dan mengurus grafik dalam Corona SDK adalah objek paparan. Bukan sahaja objek ini boleh digunakan untuk memaparkan imej dari fail, mungkin sama pentingnya, ia membolehkan anda mengumpulkan imej anda bersama-sama. Ini membolehkan anda memindahkan satu set keseluruhan grafik di sekeliling skrin sekaligus dan lapisan grafik di atas satu sama lain.

Tutorial ini akan mengajar anda asas-asas menggunakan kumpulan paparan untuk mengatur objek grafik dalam projek anda. Ini akan ditunjukkan dengan membuat dua lapisan berbeza, satu mewakili skrin biasa dan satu lagi mewakili lapisan modal untuk diletakkan di atasnya. Selain melapis grafik, kami juga akan menggunakan objek peralihan untuk memindahkan keseluruhan kumpulan modal.

Bagaimana untuk Market Your App

Nota: Untuk mengikuti tutorial ini, anda memerlukan dua imej: image1.png dan image2.png. Ini boleh menjadi mana-mana imej yang anda pilih, tetapi tutorialnya akan berfungsi dengan baik jika anda mempunyai imej sekitar 100 piksel sebanyak 100 piksel. Ini akan membolehkan anda dengan mudah melihat apa yang sedang berlaku kepada imej.

Untuk bermula, kami akan membuka fail baru yang disebut main.lua dan mula membina kod kami:

displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;

Bahagian kod ini menetapkan perpustakaan ui kami dan mengisytiharkan melalui kumpulan paparan: displayMain, paparanFirst dan paparanSecond. Kami akan menggunakannya untuk meletakan grafik kami terlebih dahulu dan kemudian memindahkannya. Pembolehubah global_move_x ditetapkan kepada 20% dari lebar paparan supaya kita dapat melihat pergerakan itu.

setup fungsiScreen () paparanMain: insert (displayFirst); displayMain: insert (displaySecond); paparanFirst: toFront (); paparan Kedua: toFront (); latar belakang setempat = display.newImage ("image1.png", 0,0); paparanFirst: masukkan (latar belakang); latar belakang tempatan = display.newImage ("image2.png", 0,0); paparan Kedua: masukkan (latar belakang); akhir

Fungsi setupScreen menunjukkan bagaimana untuk menambah kumpulan paparan ke kumpulan paparan utama. Kami juga menggunakan fungsi toFront () untuk menubuhkan lapisan grafik yang berlainan, dengan lapisan yang kami mahu di atas semua masa yang diisytiharkan yang terakhir.

Dalam contoh ini, ia tidak semestinya diperlukan untuk memindahkan paparanFirst ke bahagian hadapan kerana ia akan menjadi lalai untuk berada di bawah paparanSecond group, tetapi adalah baik untuk masuk ke dalam kebiasaan dengan jelas meletakkan setiap kumpulan paparan. Kebanyakan projek akan berakhir dengan lebih daripada dua lapisan.

Kami juga menambah imej kepada setiap kumpulan. Apabila kita memulakan aplikasi, imej kedua harus berada di atas imej pertama.

fungsi skrinLayer () paparanFirst: toFront (); akhir

Kami telah melancarkan grafik kami dengan kumpulan DisplaySecond di atas kumpulan paparanFirst. Fungsi ini akan memindahkan paparanFirst ke bahagian depan.

fungsi moveOne () displaySecond.x = displaySecond.x + global_move_x; akhir

Fungsi moveOne akan memindahkan gambar kedua ke kanan dengan 20% lebar skrin. Apabila kita memanggil fungsi ini, kumpulan DisplaySecond akan berada di belakang kumpulan paparanFirst.

fungsi moveTwo () displayMain.x = displayMain.x + global_move_x; akhir

Fungsi Dua yang bergerak akan memindahkan kedua-dua imej ke kanan dengan 20% dari lebar skrin. Walau bagaimanapun, alih-alih memindahkan setiap kumpulan secara individu, kami akan menggunakan kumpulan paparan yang memindahkan mereka pada masa yang sama. Ini adalah contoh hebat bagaimana kumpulan paparan yang mengandungi pelbagai kumpulan paparan boleh digunakan untuk memanipulasi banyak grafik sekaligus.

setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);

Kod terakhir ini menunjukkan apa yang berlaku apabila kita menjalankan fungsi ini. Kami akan menggunakan fungsi timer.performWithDelay untuk memadamkan fungsi setiap saat selepas aplikasi dilancarkan. Jika anda tidak terbiasa dengan fungsi ini, pembolehubah pertama adalah masa untuk menunda dinyatakan dalam milisaat dan yang kedua adalah fungsi yang kita mahu lari selepas kelewatan itu.

Apabila anda melancarkan aplikasi, anda harus mempunyai imej2.png di atas imej1.png. Fungsi screenLayer akan menyala dan membawa image1.png ke depan. Fungsi moveOne akan memindahkan image2.png keluar dari bawah image1.png, dan fungsi Dua yang bergerak akan menyala terakhir, menggerakkan kedua gambar pada waktu yang sama.

Bagaimana untuk Membaiki Perlahan iPad

Adalah penting untuk diingat bahawa setiap kumpulan ini boleh berpuluh-puluh imej di dalamnya. Dan sama seperti fungsi Dua kali bergerak kedua-dua imej dengan satu baris kod, semua imej dalam kumpulan akan mengambil arahan yang diberikan kepada kumpulan.

Secara teknikal, kumpulan paparanMain boleh mempunyai kedua-dua kumpulan paparan dan imej yang terkandung di dalamnya. Walau bagaimanapun, amalan yang baik untuk membiarkan sesetengah kumpulan seperti memaparkanMain bertindak sebagai bekas untuk kumpulan lain tanpa sebarang imej untuk mewujudkan organisasi yang lebih baik.

Tutorial ini menggunakan objek paparan. Ketahui lebih lanjut mengenai objek paparan.

Bagaimana Memulakan Aplikasi iPad Membangunkan