TAT.岑安 context2D 上的 texture mapping
In HTML5,Web开发 on 2012年08月22日 by view: 14,900
4

我们在做一些图像变换或者 3D 建模时,骨架或者网格的 “蒙皮” 是少不了的。

在 webGL 中,也就是 “experimental-webgl” 的 context 中,webGL 跟 openGL 一样,提供了一个非常方便的

接口,可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且,被蒙皮的区域做矢量变换,3d rotate 之类的,texture 会自动随着变换。不用额外的做处理。所以在 webGL 中,textureMapping 是十分容易和方便的。

这里有个简单的 demo,支持 webGL 的浏览器可以尝试围观下。

当然,从文章的标题可以看出,我们今天要讨论的内容并不是 webGL 下的 bindTexture。而是在 2D 的 context 下怎么对素材进行 TextureMapping?

TAT.岑安 Animations in Canvas
In HTML5,HTML5游戏 on 2012年08月21日 by view: 12,181
4

关于 Canvas 中动画的处理和实现

大致会有三种类型:

  • 矢量动画【No Textures】
  • 关键帧动画
  • 骨骼动画

业余时间做一些感兴趣的事情,积累了好多 test cases,其中有一些还是蛮有趣的,于是集中整理了一部分出来,其中有一些复刻的创意,有一些自己的 idea,也有一些是纯粹做测试用的,敬请围观。一期先传 40 个,持续更新 (^^)

对于 Web 前端的开发而言,为了降低文件大小,js 文件和 css 文件的压缩和组合几乎是默认的规矩。

我们利用 YUI Compressor 和 google Compiler 可以很容易的完成文件的压缩。 甚至 yui compressor 本身都已经支持 多文件的批量压缩。

以技术预研的心态做的一个东东。基于【双密度松弛算法】

目前来看应用价值不大,更多的是扩展一些思路,扩大前端方向,或者说是 js 能做的事的范围。大家路过围观一下就好。

源码不多,托管在 github/hongru/fluid 上,感兴趣的可以大致看一看。

废话不多说,直接进入正题,这篇文章主要为大家讲解一下一个类似【Z-Type】的 html5 小游戏的开发思路。

【Z-Type】不知大家是否有玩过,Impactjs 的一个演示 demo。一个需要 99$的 html5 游戏框架。咱们暂且先不管他实现的思路,以下我们按自己的思路来一步步实现。

以下实例基于 AlloyTeam 团队游戏底层库 【Laro】 实现.

【演示 Demo】 (Firefox3.4+,Chrome10+,safari10+ 测试通过)

TAT.岑安 关于 “职业化” 的思考(一)
In 团队 on 2012年05月02日 by view: 4,639
2

每个人在工作中成长,职业化都是一个必经之路。

这是一个渗透进细节和个人工作习惯之中的一个问题,不积跬步,无以至千里,不积小流,无以成江海。关于职业化行为以及怎么来职业化,做了一些思考,希望能沉淀下来,勉励自己,也和大家共勉。

好久没有更新 blog 了。今天终于有了心再写一篇。算是对自己工作和生活的一种回顾吧。

11 年底和 12 年初的时候自己都没有写什么总结性质的博文,或者之类的东西。但是心里确是有稍微对过去的时间做一点结算工作的。

飞行射击类游戏很常用的追踪子弹,或者塔防里面固定炮台打 怪物的时候,为了保证子弹不会打空,追踪是必要的。
然而,这是极其简单的事情。
在每一帧里判断当前子弹和目标位置的距离和方向,不断修正 速度方向即可。

我们的图片大部分都是可以转换成 base64 编码的 data:image。 这个在将 canvas 保存为 img 的时候尤其有用。虽然除 ie 外,大部分现代浏览器都已经支持原生的基于 base64 的 encode 和 decode,例如 btoa 和 atob。(将 canvas 画布保存成 img 并强制改变 mimetype 进行下载,会在下一篇记录)

但是处于好奇心,还是驱使我去了解下 base64 编码的原理。以便也在不支持原生 base64 编码的 ie 下可以得以实现。