Loading..
Sponsored By :GoogleAdsense.

Monday, June 6, 2011

Membuat game dengan RPG

Langkah 1: Set Up Your Flash File
Create a new Flash file (Actionscript 3). Membuat file Flash yang baru (Actionscript 3). Your movie settings will vary depending on your game. Pengaturan film Anda akan bervariasi, tergantung pada permainan Anda. For this demo I'm setting up my movie as 500×300, with a black background and 30 fps. Untuk demo ini saya menyiapkan film saya sebagai 500 × dengan latar belakang hitam dan 30 fps, 300.

________________________________________
Step 2: Add a Background Image Langkah 2: Tambahkan sebuah Gambar Latar Belakang
You'll most likely be showing the text module over an image or animation from your game. Anda akan kemungkinan besar akan menampilkan modul teks melalui gambar atau animasi dari permainan Anda. For this demo I'm just using an image I threw together with a few of the characters from my games standing in a field of snow. Untuk demo ini saya hanya menggunakan foto saya melempar bersama-sama dengan beberapa karakter dari permainan saya berdiri di sebuah lapangan salju.
Put your background image on a layer called “background”. Pasang gambar latar belakang Anda pada lapisan yang disebut "latar belakang".

________________________________________
Step 3: Create the RPGText MovieClip Langkah 3: Buat movieklip RPGText
Create a new MovieClip on the stage (Insert > MovieClip) named “RPGText.” Buat movieklip baru di panggung (Insert> movieklip) bernama "RPGText."
In the Symbol Properties check “Export for Actionscript” and set the class name to “RPGText”. Dalam memeriksa Properties Simbol "Ekspor untuk ActionScript" dan menetapkan nama kelas untuk "RPGText". We'll use this class name later to link code to this MovieClip. Kami akan menggunakan nama kelas kemudian kode link movieklip ini.

Click OK. Klik OK. If you see a warning here that the class definition could not be found, that's OK. Jika Anda melihat peringatan di sini bahwa definisi kelas tidak dapat ditemukan, itu OK. It just means there isn't any code to link to this symbol (yet). Ini hanya berarti tidak ada kode untuk link ke simbol ini (belum).
Give your MovieClip the instance name “rpgText.” Remember, when I'm talking about “RPGText” (uppercase) I'm referring to the class (or MovieClip); “rpgText” (lowercase) is the name of an instance of that class. Berikan Anda movieklip nama misalnya "rpgText tentang." Ingat, ketika aku bicara "RPGText" (huruf besar) Saya mengacu pada kelas (atau movieklip); "rpgText" (huruf kecil) adalah nama sebuah instance dari kelas.
________________________________________
Step 4: Add a Text Panel Background Langkah 4: Menambahkan Latar Belakang Panel Teks
Draw a rectangle inside your new RPGText MovieClip. Gambarlah sebuah persegi panjang dalam baru Anda RPGText movieklip. This will be the background for the character icons and speech bubble. Ini akan menjadi latar belakang karakter dan ikon gelembung pidato. Design it however you like, but it should span the entire width of your movie and be short enough that it doesn't cover too much of your game. Desain itu namun Anda suka, tetapi harus span seluruh lebar film Anda dan cukup pendek tidak menutupi terlalu banyak dari permainan Anda.
I made mine 500px wide (to match my movie) and 100px high. Aku membuat tambang 500px lebar (untuk mencocokkan film saya) dan 100px tinggi. I filled it with a gradient from #666666 to #999999 (dark gray to lighter gray). Aku mengisinya dengan gradien dari # 666666 ke # 999999 (abu-abu gelap ke abu-abu terang).

Quick Tip: to draw a rectangle of a specific size, select the rectangle tool and Alt-click on the stage. Quick Tip: untuk menggambar segi empat dengan ukuran tertentu, pilih rectangle tool dan Alt-klik di atas panggung. You'll get a dialog box where you can enter the dimensions of your rectangle. Anda akan mendapatkan kotak dialog di mana Anda dapat memasukkan dimensi persegi panjang Anda.
________________________________________
Step 5: The Character Icon MovieClip Langkah 5: movieklip Ikon Karakter
Create a new layer inside the RPGText MovieClip called “icon.” Create a new MovieClip on this layer called “characterIcon” and give it the instance name “characterIcon.” Membuat layer baru di dalam movieklip RPGText disebut "Buat ikon." Sebuah movieklip baru pada lapisan yang disebut "characterIcon" dan berikan nama misalnya "characterIcon."
Inside the characterIcon MovieClip create two new layers: “icons” and “labels.” The icons layer will contain all of your character icons (each on its own keyframe) and the labels layer will contain frame labels that we'll use to display the characters at the proper time. Di dalam characterIcon movieklip menciptakan dua lapisan baru: "ikon" dan "label itu." Lapisan Ikon akan berisi semua ikon karakter Anda (masing-masing sendiri pada keyframe) dan label lapisan akan bingkai berisi label yang akan kita gunakan untuk menampilkan karakter pada waktu yang tepat.
Import (or draw in Flash) an icon for each of the characters in your game that will be speaking. Impor (atau menggambar di Flash) ikon untuk setiap karakter dalam permainan Anda yang akan berbicara. For this demo I made a 75×75px JPG for each of my characters. Untuk demo ini saya membuat JPG 75 × 75px untuk masing-masing karakter saya. Add the icons to the icons layer, making a new keyframe for each character. Tambahkan ke lapisan ikon ikon, membuat keyframe baru untuk setiap karakter. The order in which they appear is not important, but make sure each icon is placed at x:0, y:0 so they don't appear to jump around when you switch characters. Urutan di mana mereka muncul adalah tidak penting, tapi pastikan tiap ikon ditempatkan di x: 0, y: 0 sehingga mereka tidak muncul untuk melompat-lompat bila Anda mengaktifkan karakter.

________________________________________
Step 6: Add Frame Labels Langkah 6: Tambahkan Frame Label
Now create a new keyframe on each frame of your labels layer. Sekarang membuat keyframe baru pada setiap frame lapisan label Anda. A quick way to to do this is to select all the frames and hit F6. Cara cepat untuk untuk melakukan ini adalah untuk memilih semua frame dan tekan F6.
Select each label keyframe one by one and add a frame label that corresponds to the name of the character that appears in that frame. Pilih masing-masing keyframe label satu per satu dan menambahkan frame label yang sesuai dengan nama karakter yang muncul dalam bingkai. If you add a few empty frames (F5) in between your keyframes, it will make it easier to read the frame labels, just make sure your labels keyframes stay lined up with your icons keyframes. Jika Anda menambahkan beberapa frame kosong (F5) di antara keyframes Anda, itu akan membuat lebih mudah untuk membaca label frame, tapi pastikan label Anda keyframes tetap berbaris dengan ikon keyframes Anda.

Make sure that each of your labels has a unique name. Pastikan bahwa setiap label Anda memiliki nama yang unik. If you have two characters with the same name, you'll need to differentiate them somehow ('John_L' and 'John_K' for example). Jika Anda memiliki dua karakter dengan nama yang sama, Anda akan perlu untuk membedakan mereka entah bagaimana ('John_L' dan 'John_K' misalnya).
________________________________________
Step 7: Draw the Speech Bubble Langkah 7: Gambarlah Bubble Pidato
Go back to the RPGText MovieClip and create a new layer called “textBackground.” Kembali ke movieklip RPGText dan menciptakan lapisan baru yang disebut "textBackground."
Draw a speech bubble. Menggambar gelembung pidato. I drew a simple bubble with squared corners, but you can make yours look however you want. Aku menarik gelembung sederhana dengan sudut kuadrat, tetapi Anda dapat membuat Anda terlihat namun anda inginkan. Make it big enough that it fills most of the background rectangle and sits nicely next to your character icons. Buatlah cukup besar yang mengisi sebagian besar persegi panjang latar belakang dan duduk manis di samping ikon karakter Anda.
Select your speech bubble and convert it to a MovieClip (Modify > Convert to Symbol). Pilih pidato gelembung Anda dan mengubahnya menjadi movieklip (Modify> Convert to Symbol). Now that it's a MovieClip we can add a drop shadow filter to it. Sekarang ini adalah movieklip kita dapat menambahkan filter drop shadow untuk itu. I set mine to black, 50% strength, 5px blur and 1px distance. Aku mengatur tambang ke hitam, kekuatan 50%, 5px 1px kabur dan jarak.

________________________________________
Step 8: Add the Dynamic Text Field Langkah 8: Tambahkan Lapangan Teks Dinamis
Create a new layer in the RPGText MovieClip called “text.” Use the text tool to draw a text box. Membuat layer baru di movieklip RPGText disebut "kotak teks." Gunakan teks alat untuk menggambar teks. Make it fit just inside the edges of the speech bubble graphic. Buatlah sesuai tepat di tepi gelembung pidato grafis.
Make it a multiline dynamic text field with the instance name “txt.” Remember to embed the font if you're not using system text. Buatlah kolom teks multiline dinamis dengan nama misalnya "txt." Ingatlah untuk menanamkan font jika Anda tidak menggunakan sistem text. I'm using 13pt Courier. Saya menggunakan Courier 13pt.

________________________________________
Step 9: Add the Next Button Langkah 9: Tambahkan Tombol Berikutnya
We need a way for the player to advance to the next text block when the player has finished reading. Kita membutuhkan suatu cara untuk pemain maju ke blok teks berikutnya ketika pemain telah selesai membaca. Let's add a small “next” button in the corner. Mari kita tambahkan sebuah "kecil di sebelah" tombol di sudut.
Create a new layer in the RPGText MovieClip called “button.” Add a new button symbol called “b_next.” Design the four states of your button however you like. Membuat layer baru di movieklip RPGText disebut "tombol." Tambah tombol simbol baru yang disebut "b_next tombol." Desain empat negara Anda namun Anda suka. I used a small down arrow as the button symbol because I see that in a lot of games and assume players are familiar with it. Saya menggunakan panah bawah kecil sebagai simbol tombol karena saya melihat bahwa dalam banyak permainan dan menganggap pemain yang akrab dengannya.
Put your button in the lower right corner on top of your speech bubble. Tempatkan tombol Anda di sudut kanan bawah di atas gelembung bicara Anda. Don't worry about giving it an instance name. Jangan khawatir tentang memberi nama contoh. I'll explain why later. Aku akan menjelaskan mengapa nanti.

________________________________________
Step 10: Create the Document Class Langkah 10: Buat Kelas Dokumen
Create a new Actionscript file called “Main.as” and add this code to create the empty shell for the class: ActionScript baru Buat file yang bernama "Main.as" dan tambahkan kode ini untuk menciptakan shell kosong untuk kelas:
view plaincopy to clipboardprint?
1. package { paket (
2. import flash.display.MovieClip; flash.display.MovieClip impor;
3. public class Main extends MovieClip { Public class Utama (meluas movieklip
4.
5. // CONSTRUCTOR / / Konstruktor
6. public function Main() { umum fungsi Main () (
7. } )
8. } )
9. } )
Set Main as the Document Class in your Flash file. Set Main sebagai Kelas Dokumen di file Flash Anda. If you'd like a quick refresher on using a Document class, this Quick Tip from Michael Williams is one of the best explanations I've seen. Jika Anda ingin diingatkan cepat tentang cara menggunakan kelas Dokumen, Tip ini dari Michael Williams adalah salah satu penjelasan terbaik yang pernah kulihat.
________________________________________
Step 11: Add the Text Blocks Langkah 11: Tambahkan Teks yang Blok
If you're using this in a game you'll probably choose to put it elsewhere, but for now we'll be adding it to the Document Class. Jika Anda menggunakan ini dalam permainan Anda mungkin akan memilih untuk meletakkannya di tempat lain, tetapi untuk sekarang kita akan menambahkannya ke Kelas Dokumen. Add this code to the constructor function in the Main class: Tambahkan kode ini ke fungsi konstruktor di kelas Utama:
view plaincopy to clipboardprint?
9. var textBlocks:Array = new Array( var textBlocks: Array = Array baru (
10. ["Kid", "Look, a robot!"], ["Kid", "Lihat, robot"]!,
11. ["Abe", "BLEEP-BLOOP. I am an Autonomous Botanical Engineer. You can call me ABE."], ["Abe", "Bleep-BLOOP. I am an Engineer Otonomi Botani Anda bisa memanggilku ABE.."],
12. ["Kid", "Hi Abe. Meet Frosty the Snowman."], ["Kid", "Hai Abe. Temui Frosty Snowman itu"].,
13. ["Frosty", "Happy Birthday!"], ["Frosty", Ulang Tahun "Happy"]!,
14. ["Abe", "BEEP-BIP. Hello, Frosty."], ["Abe", "BIP-BIP. Halo, Frosty"].,
15. ["Abe", "Does this frog belong to you?"], ["Abe", "Apakah kodok ini milik Anda"]?,
16. ["Frog", "Ribbit..."], ["Frog", "Ribbit ..."],
17. ["Kid", "No I've never seen him before. Aren't you cold frog?"], ["Kid", "Tidak aku belum pernah melihatnya sebelum Apakah kau katak dingin?".],
18. ["Frog", "Ribbit..."] ["Frog", "Ribbit ..."]
19. ); );
20.
21. rpgText.textBlocks = textBlocks; rpgText.textBlocks = textBlocks;
Here we're creating a two-dimensional array (an array that contains other arrays) to hold the script for our scene. Di sini kita sedang menciptakan dua-dimensi array (array yang berisi array lain) untuk mengadakan naskah untuk adegan kami. Before you change anything, take a look at how it's structured. Sebelum Anda mengubah apa pun, kita lihat bagaimana itu terstruktur. Each array is a separate text block that contains two elements. Setiap array adalah sebuah blok teks terpisah yang berisi dua elemen. The first is the character's name and the second is the text that he'll speak. Yang pertama adalah nama karakter dan yang kedua adalah teks yang dia akan berbicara. The text blocks are listed in the order that they will appear in the scene. Blok teks yang tercantum dalam urutan yang mereka akan muncul di TKP.
The last line just sends the textBlocks array to the rpgText MovieClip (remember “rpgText” is the instance name of the RPGText MovieClip on the stage). Baris terakhir hanya mengirimkan array textBlocks untuk rpgText pada movieklip (ingat "rpgText" adalah nama instance dari movieklip RPGText di panggung). More on this later. Lebih lanjut tentang ini nanti.
Go ahead and edit this section to fit your scene. Silakan dan mengedit bagian ini agar sesuai adegan Anda. Be extra careful that the character names correspond exactly to the names you used for the frame labels in the characterIcon MovieClip. Berhati-hatilah bahwa karakter nama sesuai persis dengan nama yang digunakan untuk frame label di movieklip characterIcon.
________________________________________
Step 12: Create the RPGText Class Langkah 12: Buat Kelas RPGText
We're finally ready to start writing the code for the RPGText class. Kami akhirnya siap untuk mulai menulis kode untuk kelas RPGText.
Create a new Actionscript file named “RPGText.as” and add this code: Buat file ActionScript baru bernama "RPGText.as" dan menambahkan kode ini:
view plaincopy to clipboardprint?
1. package { paket (
2. import flash.events.Event; flash.events.Event impor;
3. import flash.events.MouseEvent; flash.events.MouseEvent impor;
4. import flash.display.MovieClip; flash.display.MovieClip impor;
5. import flash.media.Sound; flash.media.Sound impor;
6. public class RPGText extends MovieClip { Public class RPGText meluas movieklip (
7. private const SPEAKER:int = 0; const swasta PEMBICARA: int = 0;
8. private const TEXT:int = 1; const swasta TEXT: int = 1;
9. private var _currentTextBlockIndex:int=0; var swasta _currentTextBlockIndex: int = 0;
10. private var _currentTextBlock:String; var swasta _currentTextBlock: String;
11. private var _textBlocks:Array; var swasta _textBlocks: Array;
12. // CONSTRUCTOR / / Konstruktor
13. public function RPGText() { fungsi publik RPGText () (
14. } )
15.
16. } )
17. } )
This is just a basic shell for the class. Ini hanyalah sebuah shell dasar untuk kelas. It doesn't do anything yet, but let's take a look at what's there: Ia tidak melakukan apa-apa, tapi mari kita lihat apa yang ada:
• The first few lines are just importing some of the classes we're going to need. Beberapa baris pertama hanya mengimpor beberapa kelas yang akan kita butuhkan.
• In the class declaration we're extending the MovieClip class. Dalam deklarasi kelas kami memperpanjang movieklip kelas. We need to do this because this class is linked to the RPGText MovieClip in the Library (see Step 3). Kita perlu melakukan ini karena kelas ini terkait dengan movieklip RPGText di Perpustakaan (lihat Langkah 3).
• Next, we have two constants, SPEAKER and TEXT that we'll use to get the speaker name and text from the textBlocks array we set up in the previous step. Berikutnya, kita memiliki dua konstanta, SPEAKER dan TEXT yang akan kami gunakan untuk mendapatkan nama pembicara dan teks dari array textBlocks kita tentukan di langkah sebelumnya.
• The variable _currentTextBlockIndex will keep track of which block of text we're currently displaying. The _currentTextBlockIndex variabel akan terus melacak yang blok teks ini kami sedang menampilkan.
• _currentTextBlock will hold the actual text. _currentTextBlock akan terus teks yang sebenarnya.
• _textBlocks will hold the entire array of text blocks. _textBlocks akan terus seluruh array blok teks.
• Lastly, there's the empty class constructor. Terakhir, ada kelas konstruktor kosong.
(Note: I'm using the underscore in my variable names to indicate private variables.) (Catatan: Saya menggunakan garis bawah di nama variabel untuk menunjukkan variabel pribadi.)
________________________________________
Step 13: The textBlocks Setter Function Langkah 13: Setter textBlocks Fungsi
Since our _textBlocks variable is private we'll need a way to access that variable from the Main class where we're setting up the text blocks. Sejak variabel kami _textBlocks adalah pribadi kita akan membutuhkan suatu cara untuk mengakses variabel yang dari kelas utama di mana kami menyiapkan blok teks. We'll do that by creating a “setter” function. Kita akan melakukannya dengan menciptakan setter "" fungsi. Add this to the RPGText class just below the constructor function: Tambahkan ini ke kelas RPGText tepat di bawah fungsi konstruktor:
view plaincopy to clipboardprint?
23. public function set textBlocks(txt:Array):void { fungsi publik mengatur textBlocks (txt: Array): void (
24. _textBlocks = txt; _textBlocks = txt;
25. } )
The cool thing about setters in Flash is that we can access this function as though it were a public property of the RPGText class. Yang keren tentang setter di Flash adalah bahwa kita dapat mengakses fungsi ini seolah-olah itu adalah milik umum kelas RPGText. Which is exactly what we did on line 21 of the Main class in Step 11: Dan itulah yang kami lakukan pada garis 21 dari kelas Utama pada Langkah 11:
view plaincopy to clipboardprint?
21. rpgText.textBlocks = textBlocks; rpgText.textBlocks = textBlocks;
________________________________________
Step 14: Add the updateText Function Langkah 14: Fungsi Tambahkan updateText
Add this function to the RPGText class: Tambahkan fungsi ini untuk kelas RPGText:
view plaincopy to clipboardprint?
27. private function updateText(e:Event):void { fungsi updateText swasta (e: Event): void (
28. if(txt.text.length < _currentTextBlock.length){ if (_currentTextBlock.length
29. txt.text = _currentTextBlock.substr(0, txt.text.length+1); txt.text = _currentTextBlock.substr (0, txt.text.length +1);
30. } else { ) Else (
31. removeEventListener(Event.ENTER_FRAME, updateText); removeEventListener (Event.ENTER_FRAME, updateText);
32. fillText(); fillText ();
33. } )
34. } )
This is the core functionality of the class, where the letter-by-letter typing takes place. Ini adalah fungsionalitas inti dari kelas, dimana mengetik huruf-demi-huruf terjadi. Let's take a closer look at what's happening here: Mari kita lihat lebih dekat apa yang terjadi di sini:
• Line 27: This function accepts an Event as an parameter because we'll be calling it using an ENTER_FRAME event. Line 27: Fungsi ini menerima sebuah Event sebagai parameter sebuah karena kami akan menyebutnya dengan menggunakan event ENTER_FRAME.
• Line 28: We compare the length (number of characters) currently in the txt text field to the number of characters in the _currentTextBlock String. Line 28: Kami membandingkan panjang (jumlah karakter) saat ini di bidang teks txt untuk jumlah karakter dalam _currentTextBlock String.
• Line 29: If there are fewer characters in the text field then we use the substr method to get all the characters from the beginning of _currentTextBlock up to one more than the number of characters currently in the text field. Line 29: Jika ada karakter yang lebih sedikit dalam bidang teks maka kita menggunakan metode substr untuk mendapatkan semua karakter dari awal _currentTextBlock sampai lebih dari satu jumlah karakter saat ini di bidang teks. We put all those characters into the text field, which has the effect of adding one more character to the end of the text in the text field. Kami menempatkan semua karakter ke dalam kolom teks, yang memiliki pengaruh penambahan satu karakter lebih ke akhir teks dalam kolom teks.
• Line 31: If there are the same number of characters in the text field as in the _currentTextBlock String, remove the ENTER_FRAME event that calls this function. Line 31: Jika ada nomor yang sama karakter dalam kolom teks seperti pada _currentTextBlock String, menghapus peristiwa ENTER_FRAME yang memanggil fungsi ini.
• Line 32: Call the fillText function. Line 32: Panggil fungsi fillText. We'll write this function in the next step. Kami akan menulis fungsi ini pada langkah berikutnya.
________________________________________
Step 15: Add the fillText Function Langkah 15: Fungsi Tambahkan fillText
Add this function to the RPGText class: Tambahkan fungsi ini untuk kelas RPGText:
view plaincopy to clipboardprint?
36. private function fillText(e:MouseEvent = null):void { fungsi privat fillText (e: MouseEvent = null): void (
37. txt.text = _currentTextBlock; txt.text = _currentTextBlock;
38. if(_currentTextBlockIndex < _textBlocks.length-1){ if (_currentTextBlockIndex <_textBlocks.length-1) (
39. addEventListener(MouseEvent.CLICK, nextTextBlock); addEventListener (MouseEvent.CLICK, nextTextBlock);
40. } )
41. } )
The main purpose of this function is to fill the txt text field with the text from the _currentTextBlock (line 37). Tujuan utama dari fungsi ini adalah untuk mengisi text field txt dengan teks dari _currentTextBlock (baris 37). If we let the animation play through, the updateText function should take care of that, but it's good to make sure nothing went wrong. Jika kita membiarkan bermain animasi melalui, fungsi updateText harus berhati-hati itu, tapi ada baiknya untuk memastikan tidak ada yang salah. We can also hook this function up to our “next” button to allow players to skip the text animation and immediately fill the text field with the entire text block. Kami juga dapat mengaitkan fungsi ini sampai dengan "tombol berikutnya kami" untuk memungkinkan pemain untuk melewatkan animasi teks dan segera mengisi bidang teks dengan blok seluruh teks.
Notice this function accepts a MouseEvent as an argument, but we set its default value to null. Perhatikan fungsi ini menerima sebuah MouseEvent sebagai argumen, tetapi kita mengatur nilai default untuk null. This allows us to use this function with a MouseEvent listener, since it will accept the event. Hal ini memungkinkan kita untuk menggunakan fungsi ini dengan pendengar MouseEvent, karena akan menerima acara tersebut. Since we give the event a default value we can also call the function without sending an event as we do at the end of the updateText function. Karena kami memberikan acara nilai default kita juga dapat memanggil fungsi tersebut tanpa mengirimkan sebuah event seperti yang kita lakukan pada akhir fungsi updateText.
After we fill the text field, we do a check to see if this is the last text block in the array (if the _currentBlockIndex is less than the number of elements in the _textBlock array). Setelah kita mengisi kolom teks, kita periksa untuk melihat apakah ini adalah blok teks terakhir dalam array (jika _currentBlockIndex kurang dari jumlah elemen dalam array _textBlock). If not, we add a CLICK listener to trigger a function called nextTextBlock which we'll write next. Jika tidak, kita menambahkan pendengar KLIK untuk memicu fungsi yang disebut nextTextBlock yang akan kita tulis berikutnya.
________________________________________
Step 16: About that Click Listener Langkah 16: Tentang yang Klik Pendengar
Remember when we created the “next” button and I said not to worry about giving it an instance name? Ingat ketika kita menciptakan "berikutnya" tombol dan aku berkata tidak perlu khawatir memberikan sebuah nama instance? Did you notice in the last step how we attached the CLICK listener to the entire RPGText MovieClip instead of the button? Apakah Anda melihat pada langkah terakhir bagaimana kita memasang pendengar KLIK ke seluruh RPGText movieklip bukan tombol? This makes it so the player can click anywhere on the MovieClip to advance the text. Ini membuatnya jadi pemain bisa klik manapun pada movieklip untuk memajukan teks. We really don't even need the button, but I like to put one in so there is some indication that you click to advance the text. Kami benar-benar bahkan tidak perlu tombol, tapi saya ingin menempatkan satu di jadi ada beberapa indikasi bahwa Anda klik untuk memajukan teks.
Of course this is just a personal preference of mine. Tentu saja ini hanya preferensi pribadi saya. If you want you could give the button an instance name and attach the CLICK listener to the button instead. Jika mau, Anda bisa memberikan tombol nama contoh dan pasang pendengar KLIK untuk tombol saja. I just find the bigger hit area to be easier to use. Aku hanya menemukan daerah hit yang lebih besar untuk lebih mudah digunakan.
________________________________________
Step 17: Add the nextTextBlock Function Langkah 17: Fungsi Tambahkan nextTextBlock
Back to business. Kembali ke bisnis. Add this function to the RPGText class: Tambahkan fungsi ini untuk kelas RPGText:
view plaincopy to clipboardprint?
43. private function nextTextBlock(e:MouseEvent):void { fungsi nextTextBlock swasta (e: MouseEvent): void (
44. removeEventListener(MouseEvent.CLICK, nextTextBlock); removeEventListener (MouseEvent.CLICK, nextTextBlock);
45. txt.text = ""; // clear the text txt.text = ""; / / bersihkan teks
46. _currentTextBlockIndex++; _currentTextBlockIndex + +;
47. _currentTextBlock = _textBlocks[_currentTextBlockIndex][TEXT]; // set the text _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TULISAN]; / / set teks
48. characterIcon.gotoAndStop(_textBlocks[_currentTextBlockIndex][SPEAKER]); // set the character icon characterIcon.gotoAndStop _textBlocks ([_currentTextBlockIndex] [PEMBICARA]); / / karakter ikon
49. addEventListener(Event.ENTER_FRAME, updateText); // start updating the text addEventListener (Event.ENTER_FRAME, updateText); / / mulai memperbarui teks
50. addEventListener(MouseEvent.CLICK, fillText); addEventListener (MouseEvent.CLICK, fillText);
51. } )
The first three lines are pretty simple. Tiga baris pertama cukup sederhana. Remove the MouseEvent listener, clear the text field, and increment the _currentTextBlockIndex var to point to the next text block. Lepaskan pendengar MouseEvent, mengosongkan isian teks, dan kenaikan var _currentTextBlockIndex untuk menunjuk ke blok teks berikutnya.
Line 47 is using the TEXT constant to get the current text string from the _textBlocks array and assign it to _currentTextBlock . Line 47 adalah menggunakan TEXT konstan untuk mendapatkan string teks arus dari array _textBlocks dan assign ke _currentTextBlock.
Next we use the SPEAKER constant to get the name of the character. Berikutnya kita menggunakan SPEAKER konstan untuk mendapatkan nama karakter. Since the character names match the frame labels in our characterIcon MovieClip we can use gotoAndStop to send the characterIcon MovieClip to the frame that displays that character icon. Karena karakter nama sesuai frame label di movieklip characterIcon kita dapat menggunakan gotoAndStop untuk mengirim movieklip characterIcon ke bingkai yang menampilkan ikon karakter.
Finally, we add an event listener to start typing on the new text string and then add a CLICK listener to run fillText when the MovieClip is clicked. Akhirnya, kami menambahkan pendengar acara untuk mulai mengetik pada string teks baru dan kemudian menambahkan pendengar KLIK untuk menjalankan fillText ketika movieklip diklik.
________________________________________
Step 18: Add the startText Function Langkah 18: Fungsi Tambahkan startText
We're almost done, we just need to add a function that will get everything started. Kita hampir selesai, kita hanya perlu menambahkan fungsi yang akan mendapatkan segalanya mulai. We'll do that with a public function called “startText.” Since this is a public function let's put it near the top of the RPGText class, just below the textBlocks setter: Kita akan melakukannya dengan fungsi publik yang disebut "startText setter." Karena ini adalah public fungsi mari kita meletakkannya di dekat bagian atas RPGText kelas, tepat di bawah textBlocks:
view plaincopy to clipboardprint?
27. public function startText():void { publik startText fungsi (): void (
28. _currentTextBlock = _textBlocks[_currentTextBlockIndex][TEXT]; _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEKS];
29. characterIcon.gotoAndStop(_textBlocks[_currentTextBlockIndex][SPEAKER]); (_textBlocks CharacterIcon.gotoAndStop [_currentTextBlockIndex] [PEMBICARA]);
30. addEventListener(Event.ENTER_FRAME, updateText); addEventListener (Event.ENTER_FRAME, updateText);
31. addEventListener(MouseEvent.CLICK, fillText); addEventListener (MouseEvent.CLICK, fillText);
32. } )
Look familiar? Tampak akrab? This code does almost the exact same thing as the nextTextBlock function. Kode ini melakukan hal yang hampir sama persis seperti fungsi nextTextBlock. It sets the current text and character icon, and adds the event listeners for updateText and fillText . Ini menentukan teks saat ini dan ikon karakter, dan menambahkan pendengar acara demi updateText dan fillText. Since this function only runs when the text first starts we don't need to worry about clearing the text field or incrementing the _currentTextBlockIndex like we did in nextTextBlock . Karena fungsi ini hanya berjalan saat teks pertama dimulai kita tidak perlu khawatir tentang kliring bidang incrementing _currentTextBlockIndex teks atau sejenisnya kita lakukan di nextTextBlock.
________________________________________
Step 19: Invoke the startText Function Langkah 19: Invoke Fungsi startText
Now we have a publicly accessible way to start the text. Sekarang kita punya cara yang dapat diakses publik untuk memulai teks. Let's put it to use. Mari kita memanfaatkannya.
Add this line to the bottom of the Main class constructor function: Tambahkan baris ini ke bagian bawah fungsi konstruktor kelas Utama:
view plaincopy to clipboardprint?
23. rpgText.startText(); rpgText.startText ();
This is just calling the startText function inside the RPGText class. Ini hanya memanggil fungsi startText di dalam kelas RPGText. That should get everything going. Itu harus mendapatkan segala sesuatu yang terjadi.
________________________________________
Step 20: Add Sound Langkah 20: Tambah Suara
You should be able to test your movie now and see everything working. Anda harus dapat menguji film Anda sekarang dan melihat semuanya bekerja. There's just one thing missing though: sound. Ada satu hal yang hilang walaupun: suara.
Find (or create) a sound to play as the text is typing on. Cari (atau buat) suara untuk bermain dengan teks yang sedang mengetik di. When choosing a sound for this keep it very short, since this sound will play over and over as the text types on. Ketika memilih suara untuk ini tetap sangat singkat, karena suara ini akan memutar berulang-ulang sebagai jenis teks pada. A small “boop” or button click works best for this effect. Sebuah Boop "kecil" atau klik tombol karya terbaik untuk efek ini.
Import the sound into the Library in your Flash file, check “Export for Actionscript” and give it the class name “TypingSound.” Impor suara ke dalam Perpustakaan dalam file Flash Anda, periksa "Export for ActionScript" dan berikan nama kelas "TypingSound."

To get this sound to play we only need to add two lines to the RPGText class. Untuk mendapatkan suara untuk bermain kita hanya perlu menambahkan dua baris ke kelas RPGText. First we need to instantiate the sound. Pertama kita perlu instantiate suara. Add this line at the top of the class beneath the three other private variables: Tambahkan baris ini di bagian atas kelas bawah tiga variabel swasta lainnya:
view plaincopy to clipboardprint?
17. private var _typingSound:Sound = new TypingSound(); swasta _typingSound var: TypingSound baru Suara = ();
Now skip down to the updateText function and add a line that will actually play the sound each time the text updates (line 38 is new): Sekarang melompat ke fungsi updateText dan tambahkan baris yang benar-benar akan memainkan suara setiap kali pembaruan teks (baris 38 yang baru):
view plaincopy to clipboardprint?
35. private function updateText(e:Event):void { fungsi updateText swasta (e: Event): void (
36. if(txt.text.length < _currentTextBlock.length){ if (_currentTextBlock.length
37. txt.text = _currentTextBlock.substr(0, txt.text.length+1); txt.text = _currentTextBlock.substr (0, txt.text.length +1);
38. _typingSound.play(); _typingSound.play ();
39. } else { ) Else (
40. removeEventListener(Event.ENTER_FRAME, updateText); removeEventListener (Event.ENTER_FRAME, updateText);
41. fillText(); fillText ();
42. } )
43. } )
________________________________________
Step 21: Taking it Further Langkah 21: Mengambil ini lebih lanjut
That's it for the demo. Itu untuk demo. Everything should work at this point, but if you want to integrate this into a game, you've still got some work ahead of you. Semuanya harus bekerja pada saat ini, tetapi jika Anda ingin mengintegrasikan ini menjadi sebuah permainan, Anda masih punya beberapa pekerjaan di depan Anda.
First, depending on how your game is set up you'll probably want to pull the text blocks out of the document class. Pertama, tergantung pada bagaimana permainan Anda sudah diatur mungkin Anda ingin menarik blok teks dari dokumen kelas. You might have a Scene class that you use to set up the individual conversations that occur in your game, or a Strings class that holds all the text for every conversation. Anda mungkin memiliki kelas Scene yang Anda gunakan untuk mengatur percakapan individu yang terjadi dalam permainan Anda, atau kelas String yang berisi semua teks untuk setiap percakapan.
Second, you'll want to think about how and when the text module will appear in your game. Kedua, Anda akan ingin untuk berpikir tentang bagaimana dan kapan modul teks akan muncul dalam permainan Anda. You might want to add a tween animation that makes it slide in and out from the bottom when a conversation starts and ends. Anda mungkin ingin menambahkan animasi tween yang membuat slide dalam dan keluar dari bawah saat percakapan dimulai dan berakhir. You'll also want to be listening for when the conversation is over, to either hide the text module or start the next conversation. Anda juga akan ingin mendengarkan ketika pembicaraan selesai, baik untuk menyembunyikan modul teks atau memulai percakapan berikutnya.
Since we're already checking to see if the last text block has been reached in the fillText function, you could easily add something there that handles the end of the conversation. Karena kita sudah memeriksa untuk melihat apakah blok teks terakhir telah dicapai dalam fungsi fillText, Anda dapat dengan mudah menambahkan sesuatu di sana yang menangani akhir percakapan.
I'm not including these topics in the tutorial because the way you go about these things will be very specific to your game. Aku tidak termasuk topik di tutorial karena cara Anda pergi tentang hal ini akan sangat spesifik untuk permainan Anda. This should be enough to get you started though. Ini harus cukup untuk Anda mulai though.

0 Comments:

Post a Comment

leave comment for this article...

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites

 
Photobucket