【HTML5游戏开发小技巧】RPG情景对话中,令文本逐字输出

原创 2013年07月18日 11:48:24
以前用JAVAscript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下。canvas里的内容可不像<p>那样好操作,首先,你需要懂得一些html5的API才能操作canvas,而<p>可以用DOM直接操作,相对而言,canvas还是要比<p>复杂些。那么本篇就为大家讲述入股令文本逐字输出。
  首先我先说明,本篇我不打算用任何引擎,因为今天我们是来研究技巧和原理的。一,原理
  做一个富有技巧的程序我们首先得搞清楚原理,而令文本逐字输出的原理很简单。
  假如我们有一串字符,我们可以把它们分成一个个字符,然后装入数组。例入有一个字符串yorhom,那么我们可以把他分成
  var arr = ['y','o','r','h','o','m'];的形式,这样要输出文字的话就可以编历这个数组,然后每隔一段时间就把当前遍历的那个字符输出。这样一来就可以将文字逐渐输出。
  
  光说还不行,我们还得去实现,否则就是纸上谈兵。二,实现
  首先我们看看代码:
  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5输出文字类</title>
<script type="text/javascript">
function type(){
  //画布的id
  var canvasId = "mycanvas";
  //用于输出文字的变量
  var sub = 0;
  var arr = [];
  var time = 0;
  //设定文字颜色,字体,大小,x和y坐标
  var x = 0;
  var y = 50;
  var color = "red";
  var size = "20";
  var font = "宋体";
  //设制文字内容
  var tosplitFont = "I'm yorhom,这是个令文本逐字显示的小程序";

  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);
  //循环输出
  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;
  }
}
</script>
</head>
<body onload="type()">
<canvas width="500",height="300" id="mycanvas"></canvas>
</body>
</html>这就是包括html和javascript的所有代码,只有46行,看来不怎么难。接下来我将讲解 一下这些纤纤渣渣的代码。
  
  html里的代码不解释,我们直接跳到javascript部分。看看type函数:
  function type(){
//画布的id
var canvasId = "mycanvas";
//用于输出文字的变量
var sub = 0;
var arr = [];
var time = 0;
//设定文字颜色,字体,大小,x和y坐标
var x = 0;
var y = 50;
var color = "red";
var size = "20";
var font = "宋体";
//设制文字内容
var tosplitFont = "I'm yorhom,这是个令文本逐字显示的小程序";

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);
//循环输出
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;
}
}
在这里,我解释一下变量sub,time和arr。首先sub是遍历数组的下标,也许你会说可以用控制循环的变量作为下标,其实我也试过,如果用控制循环的变量的来作下标,会出现错误。因为在javascript中的循环会先循环完,然后再慢慢执行里的内容。所以如果你用控制循环的变量的来作下标,那么输出的就一直是最后一个。因此我设定了sub变量,让它在循环内部增加,这样即使循环里最后慢慢执行,那也无妨。
  
  arr是装满被分开的文字的数组,通过split方法赋值。如下:
  arr = tosplitFont.split('');split用法是没遇见参数字符,就将这个字符前面的那一个加到数组中。我表述可能不大清楚,还是让专业人士w3cschool为你解答吧:http://www.w3school.com.cn/js/jsref_split.asp
  
  time是个控制等待时间的变量,因为setTimeout是在某一个时刻做某事,所以我们需要不断改这个时刻。
  接下来我们看输出部分:
  //循环输出
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;
}
首先我们先遍历了上述的arr,接下来我们在里面通过setTimeout在某个时刻输出文字。
  
  fillText是什么?我想我只能告诉你是html5中输出文字的东东,看看专业人士的又一讲解:http://www.w3school.com.cn/html5/canvas_filltext.asp
  由于html5中如果不是一次性输出文字,文字坐标且不改变,那么文字将叠在一起。所以我们只有改变坐标,由于我们用变量x和y控制文字位置,所以我们只用改变x就能将文字移到它该去的位置。我首先想到了可以将x设定为当前字符传的长度。
  但怎么才能算出这个字符传的长度呢?我无意间看到了measureText方法,它可以取出当前字符串的长度,所以我们就利用这个玩意儿算出上个字符长度,然后用x加上这个长度,就可以算出下一个文字该去的位置。measureText怎么用呢,看看这里吧: 游戏论坛:http://www.jiushun8.com
  就这样,逐字输出就搞定了。
  看看效果吧:
  http://www.shengshiyouxi.com
三,源码下载
  源码在这里:http://files.cnblogs.com/ducle/html5-%E8%BE%93%E5%87%BA%E6%96%87%E5%AD%97.rar

  贴几张demo图,不想看代码只想看效果的朋友可以看看:
  


  


  

RPG游戏从入门到精通

RPG游戏是国内最受欢迎的游戏之一,因为角色扮演是超越物理限制的精神享受,做到很多在现实生活里做不到的事情,也可以激情地享受大侠的生活,也能过着浪漫的爱情,还可以与仇家进行剧烈的拼杀,勇猛地创出一条血路,成立武林盟主。本课程把RPG游戏与学习编程相结合,实现“玩中学,学中玩”的愿景。
  • 2017年06月26日 08:58

Unity学习笔记——逐字显示一首诗

需求: 竖着显示一首诗,从上至下,从右至左,一个一个字输出 problem: 1. NGUI的UILabel没有垂直显示 2. UILabel顶部对齐 3. 逐字显示 so...
  • u014551513
  • u014551513
  • 2015-03-31 16:30:01
  • 1815

python3实现逐字输出

python3实现逐字输出
  • qq_40096801
  • qq_40096801
  • 2017-09-11 17:25:02
  • 273

html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现

前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下想要了解前两篇内容,请电击下面的链接html5游戏开发-零基础开发RPG游戏-开源讲座(一)ht...
  • lufy_Legend
  • lufy_Legend
  • 2011-12-23 01:45:05
  • 22968

面试英语情景对话,求职者必看!

Why are you interested in working for our company?为什么有兴趣在我们公司工作?Because your company has a good sale...
  • tryonmind
  • tryonmind
  • 2007-05-25 19:23:00
  • 14878

TypewriterEffect ugui 文字 逐字显示

using System; using UnityEngine; using UnityEngine.UI; using UnityEngine.Events; /// /// 此脚本是能够将文本...
  • juan_bo
  • juan_bo
  • 2016-10-17 10:47:10
  • 2277

【Unity3D】对话

对话大概是所有游戏里面最常见的,也是最有需要的一个系统了吧?现在某剑和某情怀就靠这个都能做天。Unity3D实现对话有很多种,下面就用最简单原生的UGUI,来实现对话。当然,这个界面简陋啊,不过原理就...
  • yongh701
  • yongh701
  • 2017-04-26 11:34:14
  • 1976

Java图形程序中的对话逐字显示实现

在现代,摒弃传统的会话方式,很多的图形广告或游戏采用了[逐字打印]的效果来展示文字,当然,这样做的目的无非是为了突出内容或吸引眼球。但是这种实现方式却是值得借鉴的,以下,我给出一个JAVA实现的简单用...
  • cping1982
  • cping1982
  • 2007-10-20 08:41:00
  • 4516

【HTML5游戏开发小技巧】RPG情形对话中,令文本逐琢夸出

从前用JAVAscript完成过令文本逐琢夸出的效果,明天嗡炒用html5中的canvas完成一下。canvas里的内容可没有像那样好操做,起首,您需求懂得一些html5的API才气操做canvas,...
  • ufodsyfaa
  • ufodsyfaa
  • 2013-07-08 10:36:05
  • 830

用js控制实现逐字显示

用js控制实现逐字显示将下面的内容保存为.html或者.jsp文件,用浏览器运行即可看到效果!!! 此功能配上背景图片(星空夜景)可以很炫酷,配上背景音乐,也可以很煽情··· Js逐字显示 co...
  • zhangfengwu2014
  • zhangfengwu2014
  • 2016-03-20 10:12:04
  • 1296
收藏助手
不良信息举报
您举报文章:【HTML5游戏开发小技巧】RPG情景对话中,令文本逐字输出
举报原因:
原因补充:

(最多只允许输入30个字)