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

原创 2013年07月08日 10:36:05

从前用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正在某个时辰输出文字。

更多请查看:http://www.shengshiyouxi.com
  
   fillText是甚么?我念我只能告诉您是html5中输出文字的东东,吭哟专业人士的又一解说:http://www.w3school.com.cn/html5/canvas_filltext.asp
  因为html5中假如没有是一次性输出文字,文字坐标且没有改动,那末文字将叠正在一同。以是我们只要改动坐标,因为我们用变量x战y控造文字位置,以是我们只用改动x就可以将文字移到它该来的位置。我起首念到了能够将x设定为当前字符传的少队耄
  但怎样才气算出那个字符传的少度呢?我无意间看到了measureText办法,它能够掏出当前字符串的少度,以是我们便操纵那个玩艺儿算出上个字符少度,然后用x减上那个少度,就能够算出现位个文字该来的位置。measureText怎样用呢,吭哟那里吧:http://www.w3school.com.cn/html5/canvas_measuretext.asp
  便如许,逐琢夸出便弄定了。

RPG游戏从入门到精通

-
  • 1970年01月01日 08:00

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

以前用javascript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下。canvas里的内容可不像那样好操作,首先,你需要懂得一些html5的API才能操作canvas,而...
  • yorhomwang
  • yorhomwang
  • 2013-04-04 16:09:07
  • 13413

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

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

《游戏脚本的设计与开发》-(RPG部分)3.3 加入多个人物以及对话实现

上一节中 给地图加入了遮挡功能,尝试着加入了一个可以控制的测试人物,并且实现了人物行走时的各个动作变换的控制。本节中接下来要做的事情就是把之前的工作全部脚本化,并且使用游戏脚本加入多个人物角色。另外,...
  • lufy_Legend
  • lufy_Legend
  • 2014-01-12 16:36:59
  • 7440

我的ISORPG游戏引擎及源代码(初级版本)

在做了若干年的商务软件开发后,我最终还是决心向我多年的梦想--游戏编程挺进,几周的学习过程,就让我得到了以前很少有过的巨大信心和成就感,这使我更加坚定地要成为一名游戏人。在经过一段时间入门学习以后,我...
  • Mickey_Chue
  • Mickey_Chue
  • 2005-01-05 22:04:00
  • 2242

【Unity3D】对话

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

Playmaker全面实践教程之playMaker编辑器

Playmaker全面实践教程之playMaker编辑器
  • u014621518
  • u014621518
  • 2015-05-25 14:10:53
  • 920

如何制作一款HTML5 RPG游戏引擎——第四篇,情景对话

今天我们来实现情景对话。这是一个重要的功能,没有它,游戏将变得索然无味。所以我们不得不来完成它。 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容。。...
  • yorhomwang
  • yorhomwang
  • 2013-06-11 21:26:33
  • 8966

cocos2d-x实现游戏剧情对话——打字效果

做RPG游戏的时候会有剧情对,中英文混搭,要求打字效果,一个字一个字的往出蹦。 先看一下xml文件 [html] view plaincopy ...
  • houjia159
  • houjia159
  • 2013-09-06 11:16:36
  • 2279

[Unity3D]Unity3D游戏开发之NPC对话系统的简单实现

大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei。        相信每一个喜欢RPG游戏的人,都会被PRG游戏中的剧情所打动吧。那么作为一部R...
  • qinyuanpei
  • qinyuanpei
  • 2014-04-23 00:33:08
  • 16496
收藏助手
不良信息举报
您举报文章:【HTML5游戏开发小技巧】RPG情形对话中,令文本逐琢夸出
举报原因:
原因补充:

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