Advertisement
  1. Code
  2. Effects

Membuat kelas Skor Counter bergulir bergaya Pinball

Scroll to top
Read Time: 10 min

Indonesian (Bahasa Indonesia) translation by Evita Karlina (you can also view the original English article)

Dua kali sebulan, kita kembali beberapa pembaca kami posting favorit dari sepanjang sejarah Activetuts +. Tutorial ini pertama kali diterbitkan pada Februari 2010.

Dalam tutorial ini Anda akan membuat kelas Skor dapat digunakan kembali yang penting untuk total baru ketika poin ditambahkan (bukannya melompat ke nilai baru). Kita akan membahas graphics penciptaan serta kode.


Pratinjau Hasil Akhir

Dalam beberapa permainan ketika Anda mendapatkan poin, Anda akan melihat Skor Anda segera menuju total baru. Saya pikir itu jauh lebih sejuk jika nilai penting naik satu per satu, sehingga pemain dapat "rak atas poin". Itulah apa yang kami akan membuat di sini.

Berikut adalah contoh Skor kelas dalam tindakan:

Ide utama di balik tutorial ini akan mengajarkan Anda bagaimana program "menghitung up" fungsi, tetapi saya juga akan menunjukkan Anda bagaimana untuk membuat tampilan keren LED terlihat pada pratinjau. Kita akan mulai dengan merancang nomor:


Langkah 1: Atur File Flash Anda

Buat sebuah file baru Flash (ActionScript 3.0). Setelan film akan bervariasi tergantung pada permainan Anda. Untuk demo ini saya mendirikan saya film sebagai 500 x 300, latar belakang hitam, dan 30 fps.

Flash file setupFlash file setupFlash file setup

Langkah 2: Buat simbol Digit

Menciptakan simbol baru klip (menyisipkan > simbol baru). Simbol ini memberikan nama "angka".

TKTKTK

Langkah 3: Buat Bidang Teks Digit

Dalam klip digit gunakan alat teks untuk menambahkan nomor 0 simbol. Saya menggunakan font yang disebut pembacaan Digital, tetapi setiap LED-gaya font harus bekerja.

Mengatur ukuran teks ke 40 pt dan membuat warna amber jeruk ringan (#F4C28B). Mengatur Format ayat untuk terpusat.

TKTKTK

Langkah 4: Menambahkan bersinar

Tambahkan dua filter cahaya terpisah ke bidang teks Anda. Atur warna menjadi merah (FF0000) untuk keduanya dan atur Kekuatan keduanya menjadi 200%.

Periksa kotak centang Inner Glow untuk satu dan diatur kabur ke 2px. Meninggalkan yang lain di 5px Blur.

TKTKTK

Anda dapat menggunakan warna yang berbeda jika Anda ingin (biru atau hijau akan berdua tampak keren). Trik mendapatkan agar terlihat realistis adalah untuk membuat warna teks sedikit dicuci dan mengatur bersinar menjadi lebih jenuh warna. Hal ini terlihat seperti itu adalah memancarkan cahaya.


Langkah 5: Menambahkan nomor lebih

Buat keyframes pada frame 1-10 dari digit klip. Cara mudah untuk melakukan ini adalah untuk memilih frame 1-10 (klik frame 1, kemudian Shift-klik bingkai 10) dan tekan F6.

Sekarang Anda harus memiliki 10 frame, masing-masing dengan keyframe dengan bidang teks 0 Anda bersinar. Pergi melalui setiap frame dan mengubah angka sehingga Anda memiliki angka 0-9. Bingkai 1 akan memiliki "0", bingkai 2 akan memiliki "1", bingkai 3 akan memiliki "2", dll.

TKTKTK

Nama lapisan ini "angka".


Langkah 6: Tambahkan Background LED

Kami sekarang akan menambahkan "off" negara untuk nomor LED, sehingga Anda akan dapat melihat segmen gelap LED display.

Salin Anda 8 digit (dalam frame 9). Buat layer baru bernama "latar belakang". Dengan lapisan baru dipilih menggunakan pasta di tempat (Edit > Paste di tempat) untuk menyisipkan 8 digit dalam posisi yang tepat seperti yang kita disalin.

Menghapus bersinar dari 8 digit baru dan mengubah warna abu-abu gelap (#333333). Menambahkan blur filter dengan Blur diatur ke 3px. Memindahkan lapisan ini di bawah lapisan "angka".

TKTKTK

Sekarang Anda bisa menggosok melalui frame dan melihat bagaimana segmen gelap LED menunjukkan di balik setiap nomor.


Langkah 7: Menambahkan tindakan berhenti

Membuat lapisan baru lain yang bernama "tindakan". Buka Panel tindakan dan menambahkan tindakan stop() pada frame 1.

TKTKTK

Ini akan menjaga layar yang menunjukkan '0' sampai kami memberitahukan sebaliknya.


Langkah 8: Mengapa Bingkai?

Mengapa kita secara manual menempatkan setiap digit pada bingkai sendiri daripada menggunakan kolom teks dinamis? Pertanyaan bagus.

Alasan utama adalah bahwa melakukan sehingga membuatnya lebih fleksibel untuk memperbarui grafis kemudian. Jika Anda ingin mengubah desain dan menggunakan bitmap untuk angka, atau memiliki setiap digit ditampilkan dalam font yang berbeda atau warna ini membuatnya mudah untuk melakukannya.

Juga, jika desainer dan pengembang bekerja sama pada sebuah proyek terbaik untuk membuat hal-hal dengan cara yang memberi desainer akses mudah ke banyak grafis yang mungkin.
Saya merasa ini Apakah bahwa lebih dari menggunakan teks dinamis.


Langkah 9: Membuat klip Skor

Membuat klip baru bernama "Nilai". Periksa 'Ekspor untuk ActionScript' dan menetapkan nama kelas "Nilai" juga.

TKTKTK

Tarik klip digit dari perpustakaan ke Skor klip. Duplikat klip digit (Edit > duplikat) enam kali (sehingga Anda memiliki tujuh digit) dan ruang mereka secara merata.

Karena kami hanya memiliki tujuh digit, skor maksimum yang dapat kami tampilkan adalah 9.999.999. Jika permainan Anda perlu mengakomodasi skor yang lebih tinggi, tambahkan lebih banyak angka yang sesuai.

Menambahkan sedikit lebih banyak ruang antara setiap digit ketiga untuk memungkinkan pemisah koma.

TK

Langkah 10: Nama klip Digit

Pilih klip paling kiri digit dan memberikannya nama contoh "digit1". Nama yang berikutnya ke kanan "digit2", kemudian "digit3" dan seterusnya.

TK

Langkah 11: Tambahkan koma

Buat layer baru disebut "koma".

Cara termudah untuk mendapatkan koma terlihat persis seperti angka-angka ini untuk pergi ke salah satu klip digit dan menyalin salah satu bidang teks nomor.
Kembali ke dalam klip film Skor, paste bidang teks ke lapisan koma, dan mengubah nomor koma. Duplikat ini dan memindahkannya sebanyak yang Anda butuhkan.

TK

Langkah 12: Tambahkan Latar Belakang

Untuk latar belakang Skor kita hanya akan menambahkan persegi lengkung sederhana.

Buat layer baru disebut "latar belakang" dan menempatkannya di balik lapisan angka dan tanda koma. Pilih Rectangle Tool dan pilihan-klik (Alt-klik) tahap. Membuat x 40px 200px persegi panjang dengan sudut-sudut 3px (membuat Anda lebih lama jika Anda memiliki angka lainnya). Membuat mengisi hitam dan abu-abu 1px stroke (#666666).

TK

Untuk beberapa alasan Flash selalu mendistorsi stroke pada persegi panjang bulat. Untuk menyiasati ini, pilih stroke dan pilih Modify > bentuk > mengkonversi baris untuk mengisi. Ini mengkonversi stroke dari baris ke bentuk diisi dan itu tidak akan mengganggu.

TKTKTK

Jika Anda pikir ini adalah sebuah hack total solusi untuk fungsionalitas dasar yang harus telah diperbaiki tahun yang lalu, saya mendorong Anda untuk menghubungi Adobe dan biarkan mereka tahu.


Langkah 13: Menambahkan bersinar

Grafis apa akan lengkap tanpa beberapa bersinar iPhone-esque?

Buat layer baru di atas segalanya yang disebut 'bersinar'. Tambahkan persegi panjang bulat baru, sedikit lebih kecil dari latar belakang. Kali ini berikan tanpa stroke dan isi dengan gradien putih dari 20% Alpha hingga 0% Alpha.

TKTKTK

Langkah 14: Membuat kelas Skor

Buat sebuah file baru Actionscript yang bernama "Score.as". Menyimpannya dalam direktori yang sama seperti file Flash Anda utama. Karena nama kelas dan nama kelas ekspor kami Skor klip yang sama, Flash secara otomatis akan menghubungkan mereka.

Tambahkan kode ini ke Score.as file:

Ini hanyalah cangkang kosong kelas untuk saat ini. Kami harus memperluas kelas MovieClip karena kelas ini ditautkan ke klip film di perpustakaan, jadi kami juga harus mengimpor kelas MovieClip. Kita akan menggunakan ENTER_FRAME acara, jadi kita mengimpor kelas acara juga.


Langkah 15: Menambahkan variabel dan konstanta

Menambahkan dua baris untuk kelas Skor tepat di atas fungsi constructor.

Ini adalah dua konstanta - semacam pengaturan seperti untuk kelas.

  • Yang pertama, kecepatan, mengontrol seberapa cepat menghitung Skor. Saya telah ditetapkan untuk menghitung satu per satu, tetapi jika permainan Anda menggunakan nilai yang lebih tinggi ini mungkin terlalu lambat. Anda dapat mengubah ini untuk 5 atau 10 atau 50 untuk menghitung dengan penambahan tersebut.
  • Terus-menerus yang kedua, NUM_DIGITS, mendefinisikan digit berapa banyak yang kita miliki dalam klip video Skor kami. Jika Anda menambahkan lebih (atau kurang) daripada 7 digit, Anda akan perlu untuk mengubah hal ini.

Sekarang mari kita tambahkan beberapa variabel. Letakkan ini di bawah konstanta:

Variabel-variabel ini akan menampung dua versi berbeda dari skor kami. '_totalScore' akan menjadi skor aktual. '_displayScore' akan menjadi angka yang saat ini
ditampilkan pada layar LED. Jika saya menambahkan 50 untuk Skor, _totalScore segera akan 50, tapi _displayScore akan menjadi 1, kemudian 2, kemudian 3, hingga mencapai 50.

Jika Anda merasa perlu untuk mengetahui nilai sebenarnya (seperti untuk kirim ke Skor tinggi Anda papan) Anda akan menggunakan _totalScore sejak _displayScore mungkin tidak akurat.

Saya menggunakan garis bawah pada awal nama variabel untuk menunjukkan bahwa ini adalah variabel pribadi.


Langkah 16: Tambahkan Metode Accessor totalScore

Jadi jika _totalScore variabel pribadi, bagaimana akan kita mengakses dari di luar kelas Skor? Kita akan menggunakan "aksesor" atau "getter" metode.

Menambahkan metode ini di bawah fungsi constructor:

Metode ini hanya mengembalikan nilai variabel _totalScore. Ini memberi kita cara untuk mengakses nilai tanpa harus mengekspos hal itu sebagai variabel umum.


Langkah 17: Tambahkan Metode add

Kita akan membutuhkan cara untuk menambahkan poin untuk Skor. Menambahkan metode ini:

Metode ini menerima integer "jumlah" yang menambahkan ke variabel _totalScore. Baris kedua dimulai acara ENTER_FRAME bahwa panggilan sebuah metode yang disebut updateScoreDisplay setiap bingkai. Kami akan menambahkan berikutnya.


Langkah 18: Menambahkan updateScoreDisplay metode

Sekarang tambahkan metode updateScoreDisplay. Di sinilah semua fungsi penghitungan keren akan terjadi. Itu harus menerima suatu Acara karena dipanggil dari acara ENTER_FRAME.

Sekarang mari kita tambahkan beberapa fungsi. Hal pertama yang metode ini akan lakukan adalah untuk peningkatan variabel _displayScore oleh jumlah yang kita menetapkan secara terus-menerus kecepatan kami:

Ada masalah potensial di sini sekalipun. Bagaimana jika kecepatan kami diatur ke 10 dan kami mencoba untuk menambah 5 Skor? DisplayScore akan lebih tinggi dari totalScore. Mari kita tambahkan beberapa baris untuk memperbaikinya:

Yang akan memeriksa apakah displayScore lebih tinggi dari totalScore dan jika demikian, set displayScore setara totalScore.

Selanjutnya kita perlu menambahkan nol terkemuka ke skor. Kami akan melakukan ini dengan mengonversi displayScore ke String dan menambahkan nol hingga panjangnya sama dengan jumlah digit yang ditentukan oleh konstanta NUM_DIGITS:

Sekarang untuk benar-benar menampilkan Skor kita akan loop melalui masing-masing dari kami klip digit (ingat kami bernama kemudian "digit1", "digit2", dll) dan menggunakan nomor dari string Skor untuk menetapkan jumlah bingkai klip:

Metode charAt mengambil karakter dari String di posisi tertentu. Hal ini memungkinkan kita melewati karakter oleh karakter string Skor.

Kurung di baris berikutnya memungkinkan kita untuk secara dinamis membuat nama klip. Kode, this["digit"+(i+1)] mengakses klip dengan nama "digit1" atau "digit2", dll, tergantung pada nilai saya.

Kami menggunakan 'num + 1' sebagai nomor frame karena nomor frame diimbangi oleh 1 dari digit yang dikandungnya (frame 1 menunjukkan 0, frame 2 menunjukkan 1, dll.)

Hal terakhir yang perlu kita lakukan dalam metode ini adalah Periksa untuk melihat jika displayScore dan totalScore yang sama. Jika demikian, kita dapat menghapus pendengar dan berhenti memanggil metode ini untuk saat ini.

Jika Anda mendapatkan di mana saja hilang dalam langkah yang Anda dapat memeriksa file sumber untuk melihat kelas selesai.


Langkah 19: Kelas Skor digunakan

Untuk menggunakan kelas ini seret klip video Score dari Library ke Stage dan berikan nama instance 'myScore'. Anda dapat menambahkan poin ke skor Anda dengan menggunakan baris ini di Kelas Dokumen Anda:

Anda dapat melihat contoh ini di file source. Saya menambahkan ke nilai ketika mengklik tombol bemper, tetapi Anda akan lebih mungkin akan menelepon add() ketika terjadi peristiwa dalam permainan.

Jika Anda perlu tahu Skor pemain Anda bisa totalScore dengan menggunakan:

Ini akan memanggil metode aksesor dan mengembalikan nilai _totalScore.


Kesimpulan

Anda sekarang memiliki reusable menghitung Skor kelas yang dapat Anda gunakan dalam salah satu permainan Anda.

Saya pikir tampilan LED's cool, tapi Anda pasti harus mengubah desain sesuai dengan tampilan dari permainan Anda. Berikut adalah beberapa ide untuk desain yang berbeda untuk Anda mulai:

TKTKTK

Terima kasih untuk membaca tutorial ini. Biarkan aku tahu apa yang Anda pikirkan!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.