读书人

html5游戏-初试

发布时间: 2012-09-10 22:20:13 作者: rapoo

html5游戏--初试
我觉得,html5很有前景,移动终端智能化、普及是一个大趋势,html5的应用有跨平台这一大的优势,传统的应用很依赖终端的系统,同样一个应用,html5也能实现,它就可以在所有的智能终端下使用,而且又有本地存储,离线使用等特性,这使得它成为未来的主流
用html5开发游戏是一件很激动人心的事,好的,开始我的html5游戏之路吧
先不看别人怎么写的,先去看一下html5给我们提供什么东西,然后说说我的想法吧
经过阅读html5 Canvas API,发现,提供的东西不多,无非是一些数学图形画法,有点、线、矩形等,然后还有一个外加载图像的功能,不过有一个激动人心的东西,就是它也提供像素级处理,这个强大,因为直接对像素处理可以进行复杂的图像变换,比强像ps里面的滤镜效果,除此之外,还有一些样式控制,状态控制。这个Canvas让我想到了和Ps的里的对比,只是让我们直观了解下Canvas
首先,Canvas里的beginPath等就是Ps里的路径,stroke就像是描边,fill就是油漆桶填充,Gradient就是渐变,bezierCurveTo就是钢笔绘贝塞尔曲线
做动画,首先想到的是,像html的div移动一样,不断改变div的css值就行了,后来发现,Canvas是绘图的,不是做动画的,它没有图层的概念,你将某个图片放到画布上,它就是整一个图片了,你不可能控制这个图片的移动了。后来想,那就不移动它,再重新画一张就行了

以Flash的模式来用Canvas做游戏动画
舞台、祯、元件这些概念用在Canvas上
想一想Flash的逐祯动画的制作过程
一个小丑的移动过程:每一祯都是一幅图像,每一幅图像中,小丑向前移动一步,Flash控制每隔很短的时间显示一祯,这样就形成了一个动画
对就Canvas里就可以这么做,一个舞台对象,舞台上有各种小丑(元件),一祯一祯的显示,这一祯显示完了就把舞台清空,然后重新绘制下一祯
Flash里边涉及两个问题:
一条主控时间线,控制舞台的显示,然后对于每个元件,可能还会一个自己的时间线,就是当元件是动画的时候
那么在Canvas里,就可以对应着这样的设计模式
构造一个舞台对像Stage,将各个元件放在舞台上,不要时间主线,Stage有一个擦空原来舞台,根据Stage的各元件状态重绘舞台的方法,每一个元件要做动画的时候就生成一个自己的时间线,比如小丑要移动的时候,可以在任何时候要求舞台Stage重绘舞台,这样,可能会在某个时刻,没有一个元件要求重绘舞台,那么Canvas的祯频就是0,这样的帧频是动态变化的


接着学习中……

读书人网 >CSS

热点推荐