解放号上面的包怎么样？安全性高吗？ - 知乎24被浏览<strong class="NumberBoard-itemValue" title="1分享邀请回答95 条评论分享收藏感谢收起41 条评论分享收藏感谢收起　　好久没更新博客了，以前很多都不会，所以常常写博客总结，倒是现在有点点经验了就懒了。在过去的几个月里，在canvas游戏框架方面，撸过了CreateJS，玩得了Egret，又学过PIXI.js。在移动前端方面，尤其是小游戏开始有一点点小经验了。但只是小经验，为什么说是小经验？
　　首先，深度不足，虽然用得最熟最多的白鹭，可是习惯了JavaScript，对TypeScript的OOP编程掌握得还不够；其次，对Egret等游戏框架了解的广度还不够，还有相当部分用法没用到。虽然能够应付朋友圈里传播的大多数的H5小游戏，可是还有很大的进步空间。尤其是欠缺重度游戏以及性能方面的处理。所以，不论是一般的Web前端方面，还是H5游戏方面，我都要继续努力学习了。不足错漏之处，恳请大家多多指点。
什么是Egret？
　　Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心产品是Egret Engine，是一个基于TypeScript语言开发的一个HTML5游戏引擎，其余的大多是开发和辅助工具。
　　关于这个引擎和工具方面的介绍，我就不多说了，以下是白鹭的下载地址，咋们直接从安装完成后讲起。
　　Egret官网：
准备阶段：
　　首先，安装完egret engine后在桌面打开这个logo，双击后你能看到以下引擎界面：
　　如果你已经下载最新版，那就直接使用最新版本就好，假如从别的地方拷到了不同版本的项目，那就必须打开这个界面再安装不同的引擎版本，以打开其他人不同版本的代码。
　　接下来点击工具按钮，从界面上我们可以看到很多工具，但是做H5小游戏常用的只有Egret Wing、Texture Merger等，部分人可能需要做重游或者native app的，可能需要其他的工具，但这里不作介绍。没用过哈哈哈~~
　　继续选择下载，由于我这里都已经下载安装好了，所以界面上显示已安装，这里比较简单就不详说了。
使用阶段：
　　在以上工具都准备后，在engine界面或者桌面图标点击打开Egret Wing，会看到以下画面：
　　Wing可以理解为专门使用TypeScript开发白鹭项目的IDE了，以后我们使用egret过程中，会一直跟这个界面打交道。
　　好，现在我们先创建一个项目，我先建一个游戏项目，置于其他界面有什么区别呢，可以自行新建试试。EUI是主要做交互界面的，空项目是没有配置好相关需要的代码以及功能模块的，例如做缓动效果的Tween和加载的RES等等，所以为了方便，我们一般直接新建游戏项目。
然后进入下一步：
　　在这里，你需要配置游戏界面的大小，视频模式以及旋转设置。尺寸直接是设计图宽高，而视口我们一般会选择showALL（显示全部内容，不变形但会在留白），
　　网上也有一部分人开发的时候用fixedWidth（适配宽度，高度不足时会隐藏底下部分，适用于只有一些动画在上方，且下方是无关重要的背景时）。
　　还有一些人（例如我有时候）会用到百分百满屏的exacFit，设计师弄一个适中的尺寸，然后按照这种模式铺满全屏，有少数很宽或很长的屏幕会有一点变形，但是不影响游戏体验与界面。但是不好的地方是PC或pad打开会变形。
选择完之后，我们点击完成。打开新建的项目目录：
　　src是TypeScript源码目录，bin-debug是调试环境编译出来的js，libs是文件包的引用目录，template主要是app用到的runtime；
　　resource是我们项目中的资源路径，一般我们把图片音频等素材放置asset目录下，json等配置文件放置config目录下，default.res.json是我们用于加载资源的json配置文件，一般不修改名字，后面会讲到怎么使用。
　　egretProperties是我们这个项目的一些配置记录信息，一般我们不需要动它。而index.html就是我们游戏的主界面文件。
　　打开index.html
　　我们可以看到游戏界面所需的js，都自动生成并引用好了。这一部分我们不需要也不能手动去修改。
　　但是你可以在style标签中修改背景色或者在div属性值中修改配置参数，如渲染的帧率（一般我们设成60，如果是计算量大的，我们再适当降低），在这里我们可以重新修改刚刚新建游戏时的适配模式、宽高、旋转等；
　　将data-show-fps和data-show-log设成true，我们就可以看到游戏运行的实时帧率了。
　　帧率可以检测游戏运行的流畅度（性能），渲染数量越多，同时计算量越大，性能就越差，掉帧就越多。所以帧率越高，则表示性能越好，流畅度高。
　　另外，在底部，我们还能看到一个egret.runEgret({})的运行方法，在这里，你可以修改egret的渲染模式，默认是"webgl"。但是如果你需要用到跨域图片资源或者有大量的图片和文字，你最好还是使用"canvas"模式，避免跨域报错和性能问题。
&　　明天更新第二篇，敬请期待。
阅读(...) 评论()
随笔 - 16618
评论 - 157910k 人阅读
标签：至少1个，最多5个
本系列文章对应游戏代码已开源
介绍了canvas的基础用法，了解了游戏开发所要用到的API。这篇文章开始，我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些游戏开发的思路和想法，而不是仅仅知道怎么写代码来完成这个游戏。
先用一张图来了解一下整个游戏的构成。
Map表示整个背景地图，作用很简单，就是渲染黑色背景。Player 表示玩家粒子，它尾巴中带有生命点，我们用Life类来表示。Enemy为红色的敌人粒子，因为技能粒子和Enemy粒子具有很多共性，所以Skill粒子继承自Enemy粒子。粒子之间撞击后有爆炸效果，用Paticle来表示爆炸粒子。
简单来说，游戏就是一帧一帧图像的叠加播放，并通过捕获用户反馈来实现游戏中的人机交互。
图像的逐帧播放可以类比为放映电影，通过在荧幕上连续投放图像来产生动作的效果。
首先要创建这样一个荧幕, 并设置银幕的大小。
//index.js
const canvas = document.getElementById('world');
canvas.width = window.innerWidth & 1000 ? 1000 : window.innerW
canvas.height = window.innerH
在游戏中，荧幕对应一个地图，我们将这个地图抽象为一个类，并提供基本的渲染方法。
class Map {
init(options) {
this.canvas = options.
this.ctx = this.canvas.getContext('2d');
this.width = options.
this.height = options.
this.ctx.clearRect(0, 0, this.width, this.height);
render() {
this.clear();
this.ctx.fillStyle = "black";
this.ctx.fillRect(0, 0, this.width, this.height);
export default new Map();
在入口处初始化地图
map.init({
width: window.innerWidth & 1000 ? 1000 : window.innerWidth,
height: window.innerHeight
荧幕准备好后，怎么放映图像，对应于游戏中的放映机是什么呢？
想想在js中用于定时执行的方法有哪些，setInterval, setTimeout, requestAnimationFrame？
setInterval这个方法在游戏中是不能用的。由于js是单线程，setInterval开启的定时循环间隔会受到CPU使用情况的影响，同时电脑对setInterval的最短间隔也有不同的要求。由于游戏对帧率的要求比较高，所以在游戏中应该避免使用setInterval来执行定时任务。由于无法把握每帧执行的具体时间，setTimeout也有会遇到类似的问题。
懂的人已经懂了，现代的H5游戏开发都是通过来执行循环播放的。它的优势就是能根据浏览器的实时渲染帧率来执行函数，使的动画播放比较流畅。而不会因为函数的执行时间跟定时器时间不同导致的播放卡顿现象。
一般requestAnimationFrame每帧的绘制时间是1000/60 ms。也就是每秒能绘制60帧。好就好在时间不需要我们自己设置，而是浏览器的内在机制。在不同的浏览器中方法名会有所不同，我们通过下面的方法来定义一个requestAnimationFrame函数
const raf = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) {
window.setTimeout(callback, 1000 / 60); //每帧1000/60ms
有个这个方法，我们如有神助。只需要在一个动画方法中使用raf调用自身方法。就能实现循环调用的功能，并且如丝般顺滑。使用如下：
(function animate() {
map.render();
raf(animate);
这样就会不断调用map的render方法，实现逐帧播放。只不过map的render方法只是把画布涂黑，所以看起来并没有什么变化。
我们的游戏中有玩家粒子，敌人粒子，还有技能粒子，撞击爆破等效果。我们的游戏就是不断地往animate这个方法中添加内容，在每一帧中渲染多个不同东西，看起来就是整个游戏画面了。我们可以想象一下未来啊animate方法是这样的。
(function animate() {
map.render();
player.render();
enemy.render();
skill.render();
effect.render();
raf(animate);
我们需要扩展player, enemy...等等的render方法。让它们表现出不同的效果。
这样渲染出来的画面还是死的，怎样让每一帧渲染出来的图像有所不同，实现动画的效果呢？
在每个物体类中，都有一个update方法，该方法用于改变物体的位移形状等，所以每一帧渲染出来的画面都会不一样。
//通过update方法来控制物体位移或形态变化
update() {
this.x += 1;
this.y += 1;
render() {
cxt.fillRect(this.x, this.y, 10, 10);
在animate中，我们需要在每次render后调用update方法
(function animate() {
map.render();
player.render();
player.update();
raf(animate);
这样，借助于游戏的发条，player就动起来了！我们前面所过，游戏就是逐帧播放和人机交互。那怎样来处理玩家反馈呢？
在PC和手机中的所谓玩家反馈通常是鼠标的点击滑动以及手势等动作。通过监听鼠标或手势事件来改变物体的属性，达到控制物体变化的目的。例如让player跟随鼠标移动。
window.addEventListener('mousemove', (e) =& {
self.x = e.clientX;
self.y = e.clientY;
达到的效果跟update方法本质上是一致的。
至此整个游戏基本原理已经讲得差不多了，下一节要讲的是如何创建各种粒子，还有player那条会动的尾巴。敬请期待
5 收藏&&|&&42
你可能感兴趣的文章
canvas 支持鼠标事件？
canvas 支持鼠标事件？
为什么js能写class？
为什么js能写class？
es6新增的写法
es6新增的写法
有需要^()^@#@做H5游戏外包(^@$可以找我，秋秋：二肆二灵灵捌伍伍漆
有需要^(*)^@#@做H5游戏外包(*^@$可以找我，秋秋：二肆二灵灵捌伍伍漆
你可能感兴趣的文章
175 收藏，
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。第一个h5小游戏怎么做? - 知乎108被浏览<strong class="NumberBoard-itemValue" title="1分享邀请回答71 条评论分享收藏感谢收起268 条评论分享收藏感谢收起