12
2015
05

createjs中Text中文不换行的问题

前段时间用createjs做了个小游戏,发现一个问题:在使用Text显示文本的时候,中文内容无论多长都会不换行,后来在每个文字之间都加入一个空格,总算能换行了。

看了看createjs的源码,Text类的 _drawText方法中有这么两句:

  1. var hardLines = String(this.text).split(/(?:\r\n|\r|\n)/);

  2. var words = str.split(/(\s)/);

结合源码上下文来看就是,先根据“\r\n|\r|\n”来分行,然后一行内再通过"\s"来分词,单词中间是不换行的,单词之间可以换行。英文单词与单词之间是有空格的,而中文文字之间是没有空格的,所以中文会有问题。中文换行实现起来并不难,只是createjs的作者没有考虑到吧。这点lufyLegend做的就比较好。

最近createjs官网还是上不去,也懒得去看源码有没有更新了。目前做的时候是在中文之间插入空格,效果看着也还可以。

这个问题并不是什么大问题,解决起来也不难,知道了就好,就不再多说了。

16
2015
04

(十)createjs-继承

js本身是没有继承的(实现继承,其他语言只要一个关键字就够了),但是牛人很多,大神们想到了很多方法来实现“继承”,要深入学习js,学习一下继承还是很有必要的,好在这方面资料很多,随便百度一下就有了。

这里,来学习一下如何实现继承createjs中的类。

先看代码:

  1.      function MyLayer(){

06
2015
02

createjs屏幕适配问题

我们用做游戏的时候,舞台的宽高是固定的,这样我们才能专心来实现游戏的逻辑,游戏做好了之后,要放到不同的设备上运行,要面对各种分辨率,还要面对手机的屏幕旋转,游戏主舞台宽高是固定的,适应屏幕无非就是控制舞台的缩放和位移。

缩放以适应屏幕大小效果不好,做游戏很少会用;按宽或者按高等比缩放也不太实用;常用的就是等比缩放并居中。其实无论哪种方式,原理都是一样的。

好多引擎都提供了响应的方法来实现屏幕适配,是的我们可以专注做游戏。createjs没有深入研究,不知道有没有。

23
2015
01

(〇)createjs-写在前面

最早接触html5(其实我都不想叫他html5,因为我用到的也就是一个Canvas,而html并不是只提供了这一个画布)的时候,用的引擎是LufyLegend,作为一个个人开发的引擎,已经很不错了,虽然有些bug,但是用来学习和做一些小游戏还是不错的。而且作者提供了很多开发实例,还有一本作者写的书。对于as开发者来说,选这个引擎入门确实受益良多。

熟悉了canvas之后,其实完全可以试着自己写一个渲染引擎,事件引擎稍难一点。虽然效率不高,但是只做一些益智类的小游戏,或者一些小应用还是完全可以的。

23
2015
01

(九)createjs-ButtonHelper

flash里边还有一个用的比较多的显示元件,没错就是SimpleButton,缩写是“SB”,设计人员喜欢,程序人员不喜欢的一个显示元件,其实只是作为按钮的话,还是很方便的。

就像as里边经常用MovieClip或是Sprite实现按钮一样,createjs里边完全可以用Sprite来实现(虽然没翻源码,猜想官方也是这么做的),所以如果够用的话就没必要自己再写一遍了。

ButtonHelper,这个名字不敢恭维,为什么不叫SimpleButton或者干脆叫Button,还是有其他深意?暂时先不管了,还是直接拿来用吧。

23
2015
01

(八)createjs-Container

Sprite不是作为容器来用的,那么用什么做容器呢?直接用Container,记得as里边DisplayObjectContainer是不能被实例化的,又不一样了吧。

其他就没什么好说的了,源码放多了也只是乱,有用的就这一句,创建容器:

  1. var con = new createjs.Container();//Sprite做了MovieClip的事,容器就用Container来做了。

然后就可以addChild了,然后就可以开始控制con的属性了。

23
2015
01

(七)createjs-mask

遮罩。

flash里边做动画,很重要的几个概念:补间动画、遮罩层、引导层。

不知道怎么说,反正遮罩很重要。看完Sprite就想起来要看看遮罩了。

canvas本身就能实现遮罩效果,createjs里边的遮罩估计也就是用了canvas里原生的东西,也没做什么更多的处理。

还是先看代码:

23
2015
01

(六)createjs-Sprite

基础的都学习了,接下来就是中级的了。

学习as的时候,最开始都是用MovieCLip,然后水平提高一点,用的最多的就是Sprite了,为了效率。

createjs里边的Sprite相当于as里边的MovieClip,有stop/play/gotoAndStop/gotoAndPlay等方法。

先看代码:

23
2015
01

(五)createjs-Bitmap

看过Text之后,再来看看Bitmap,用js的话,graphic估计会用的很少,大多数时候还是用位图的。

html里边自己的image就挺方便的,canvas处理image也挺方便。这里边没有BitmapDate,和as里不一样,为什么没有,可以看看Canvas的API,本身就提供了对于像素级的处理。LufyLegend里边提供了BitmapDate的封装,不知道createjs以后会不会也提供。

23
2015
01

(四)createjs-Text

敲完前三个例子,就算入了门了。接下来熟悉一下常用的类,先从基本的显示对象开始,as里边最基本的显示对象就3种:graphic、textField、bitmap,createjs里边也是。想想也是,屏幕上能看到的无非就是这三种:矢量图、文本、位图。

shape里边已经用过graphic了,就不再单独拿出来了。先来看一下TextField,createjs里边叫Text。

还是直接上源码,个人理解都在注释里: