[HTML5 game development tips] text output in RPG context Dialog

Previously, I used JavaScript to achieve the effect of making text output by word. Today I will use canvas in html5. The content in the canvas is not as good as <p>. First, you need to understand some HTML5 APIs to operate the canvas. <p> you can use Dom to directly operate the canvas, canvas is more complex than <p>. This article will describe the literal output of the stock order.

First, let me explain that I don't plan to use any engines, because today we are here to study the skills and principles.

I. Principle

Be skillfulProgramFirst, we need to clarify the principle, and the principle of making text output by word is very simple.

If we have a string of characters, we can divide them into characters and load them into arrays. If there is a string yorhom In the example, we can divide it

 

 
VaR arr = ['y', 'O', 'R', 'h', 'O', 'M'];
 

To output text, you can compile the array and output the character that is currently traversed at intervals. In this way, you can gradually output the text.

 

We still have to implement it, or we will talk about it on paper.

II. Implementation

First, let's take a lookCode:

 

 
    
    HTML5 output text class     
   
     

This is all the code including HTML and JavaScript, with only 46 lines. It doesn't seem very difficult. Next I will explain the code of these fiber slag.

 

The code in HTML is not explained. We directly jump to the Javascript section. Let's look at the type function:

 

 
Function Type () {// The idvar canvasid = "mycanvas" of the canvas; // The variable VAR sub = 0 for output text; var arr = []; var time = 0; // set the text color, Font, size, X and Y coordinates var x = 0; var y = 50; var color = "red"; var size = "20 "; vaR font = ""; // sets the text content var tosplitfont = "I'm yorhom, which is a small program for text display."; sub = 0; arr = tosplitfont. split (''); var c = document. getelementbyid (canvasid); var CTX = C. getcontext ("2D"); CTX. font = size + "PX" + "" + font; CTX. fillstyle = color; CTX. clearrect (0, 0, C. width, C. height); // loop output for (VAR I = 0; I <arr. length; I ++) {setTimeout (function () {CTX. filltext (ARR [sub], x, y); x + = CTX. measuretext (ARR [sub]). width; sub + = 1 ;}, time); time + = 100 ;}}
 

Here, I will explain the sub, time, and ARR variables. First, sub is used to traverse the subscript of the array. You may say that you can use the variable that controls the loop as the subscript. In fact, I have also tried to use the variable that controls the loop as the subscript, an error occurs. Because the loop in Javascript is completed first and then executed slowly. So if you use the variable that controls the loop as the subscript, the output will always be the last one. So I set the sub variable so that it can be added inside the loop, so that even if the loop is executed slowly at the end of the loop, it will be fine.

 

ARR is an array filled with separated text and assigned values through the split method. As follows:

 

 
Arr = tosplitfont. Split ('');
 

Split is used to add the one before this character to the array without meeting the parameter character. I may not be clear, let the professional w3cschool for you to answer: http://www.w3school.com.cn/js/jsref_split.asp

 

Time is a variable that controls the wait time. Because setTimeout is used to do something at a certain time point, we need to constantly change this time point.

Next, let's look at the output:

 

 
// Loop output for (VAR I = 0; I <arr. length; I ++) {setTimeout (function () {CTX. filltext (ARR [sub], x, y); x + = CTX. measuretext (ARR [sub]). width; sub + = 1 ;}, time); time ++ = 100 ;}
 

First, we traverse the above arr, and then output the text at a certain time point through setTimeout.

 

What is filltext? I want to I can only tell you Is HTML5 output text in the east, look at the professional explained again: http://www.w3school.com.cn/html5/canvas_filltext.asp

Because HTML5 does not output text at a time and the text coordinate does not change, the text will be stacked together. Therefore, we only need to change the coordinates. Because we use the variables X and Y to control the text location, we only need to change X to move the text to its proper location. I first thought of setting X to the length of the current character.

But how can we calculate the length of this character? I accidentally saw the measuretext method, which can take out the length of the current string, so we can use this to calculate the length of the last character, and then add this length with X, you can calculate the location where the next text should go. How to Use measuretext, look here: http://www.w3school.com.cn/html5/canvas_measuretext.asp

In this way, the output is handled by words.

3. Download source code

Source code here: http://files.cnblogs.com/ducle/html5-%E8%BE%93%E5%87%BA%E6%96%87%E5%AD%97.rar

Paste a few demo images. If you don't want to see the code, just look at the results:

Today is the Tomb-sweeping Day, but this holiday is too XX, so I will not wish you a Happy Tomb-sweeping Day.

 

----------------------------------------------------------------

You are welcome to repost myArticle.

Reprinted Please note: transferred from yorhom's game box

Continue to follow my blog