The Red Heart
今天在网上闲逛的时候看到了这个漂亮的心形曲线特效,动感十足。于是动手分析了一下它的实现方式,记于此文。
See the Pen The Red Heart by Ninja Lau (@mutoo) on CodePen.
Web/Game/Programming/Life etc.
今天在网上闲逛的时候看到了这个漂亮的心形曲线特效,动感十足。于是动手分析了一下它的实现方式,记于此文。
See the Pen The Red Heart by Ninja Lau (@mutoo) on CodePen.
Phaser 是一个非常流行的 html5 游戏开发引擎,而它使用的渲染层是由 Pixi.js 提供。Pixi 是一个相当完善的基于 WebGL 的 2D 渲染层,对不支持 WebGL 浏览器可采用 Canvas 垫背(2D WebGL renderer with canvas fallback)。
由于 WebGL 是 OpenGL ES 2.0 的子集,而 OpenGL ES 2.0 又是 OpenGL 2.x 的子集,所以我觉得从 WebGL 入手理解游戏引擎的渲染层如何工作是个比较容易的方向;可以忽略很多高极特性,去关注最本质的部分。
我很好奇 Pixi 是如何把 Shader、Texture、FrameBuffer 等 OpenGL 元素用 javascript 组织到一起的,于是下载了它的源码做了简单的分析。
之前在 角色动作练习:jumping/crouch 一文中录制的第一个跳跃 GIF 动画不知为何在浏览器中播放一次就停了下来,而其它的动画却可以正常循环。
Javascript 是一个「基于原型」的开发语言。它的内部有一些很有趣的机制,例如原型和闭包。为了弄清楚原型(prototpye)的工作原理,我花了点时间理清了一下思路,记于此文。