木匣子

Web/Game/Programming/Life etc.

iPhone 失而复得记

周六和朋友出去玩,回来走在路上还聊得很嗨。晚上回家歇了一个小时才发现 iPhone 不在口袋里。不紧不慢的让 LP 给我手机打个电话,看看房间里有没有声响。结果半天没有动静,这才想到会不会是丢了。两个小时前还在甜品店玩 Royale Clash Clash Royale[1],然后去了趟人满为患的华超。不至于招贼了吧!

博客迁移记录

木匣子 2010

记得是大一暑假的时候,我去了厦门网宿科技研发部的流媒体实验室,做 Flash 流媒体播放器的开发实习。赚了点零花钱,于是在 gegehost 买了 mutoo.im[1] 这个域名,以及一个 100 元/年的新手型主机,机房位于美国[2]。真是物美价廉,它是一个基于 cPanel 管理的 LAMP 共享主机,麻雀虽小五脏俱全。然后架了个 Wordpress 开始码字,记录大学期间的一些学习笔记。

木匣子 2013

毕业后,在厦门四三九九做 Cocos2d-js 手机游戏开发。工作之余发现 Typecho 这个简单美的 PHP 博客引擎,并且还支持 Markdown[3] 。比起 Wordpress 这样的庞然大物,我觉得 Typecho 更适合我这样的码农。于是就把 Wordpress 压箱底了。

虽然 Typecho 提供了迁移工具,可以导入 Wordpress 的文章。但是我不喜欢把新旧的东西混在一起,更喜欢让它们保持原来的样子,所以就将原来的 Wordpress 博客放到另外的二级域名了。

Wordpress 一直是博客界的明星,不过也有很多不错的后起之秀。Typecho 就是其中之一。但是 Typecho 的社区活跃度一直很低,版本更新停滞不前[4]。在后来的工作生活中,慢慢喜欢上 Javascript,并且注意到 Nodejs 社区有越来越多优秀的开源软件。其中 ghost 可以算是博客引擎中的一匹黑马。而相对于 PHP,我更愿意把时间花在研究 Javascript 上,所以一直想要试试这款新的博客引擎。

但是用了这么多年的 LAMP 主机并不提供 Nodejs 环境,所以没办法搭建 Ghost 博客,这件事就也搁置下来。

木匣子 2017

有一年半没有写博客,在这期间发生了很多事。从游戏公司辞职,然后考雅思出国,再到澳洲改行做前端。生活好不容易稳定下来,于是又有时间静下来整理思绪。

7月底收到主机续费的邮件,想着不如在 AWS 上搞个虚拟主机,把博客搬过去。即可以自己当运维,顺便学一下 DevOp 相关的知识,又可以把 Ghost 搞起来。现在终于如愿以偿。之后会整理一篇踩坑日志,敬请期待。


  1. mutoo.im 作 namespace 的时候,域名转置为 im.mutoo 即 I’m mutoo.

  2. 域名不需要备案,同时可作 http proxy 在敏感时期获取一些资讯。

  3. Markdown 101

  4. 截止到本文发布,Typecho 在 github 上获得 3,397 个 stars ,而 Ghost 则有 23,300 个 stars 。

Hello Ghost.

最近把博客搬到了 AWS 上。折腾了好久,终于换上了期待已久的 Ghost 博客引擎:

Ghost is a fully open source, hackable platform for building and running a modern online publication.

这是一个基于 Nodejs 的博客引擎,完全由 Javascript 驱动。这也是为什么我这么喜欢的原因。

为了保证原来博客的访问性,早期的博客被自动 301 永久重定向到 木匣子2013 以及 木匣子2010 。将来如果还换系统的话,估计会把这个博客重定向到 木匣子2017 吧。

一年半没有写博客了,这一年来发生了很多事。将会在今后的博客中慢慢回味,敬请期待。

细说精灵尺寸与 Unity3d GUI

Sprite & Texture

一般而言,精灵(Sprite)是由贴图(Texture)和矩形(Rect)构成的。矩形描述了精灵使用的是贴图中的哪个部分。

Sprite = Texture + Rect

通常一张贴图只对应一个精灵,于是矩形就和整个贴图大小相同。例如一张 512 * 512 的贴图,矩形则是 Rect(x=0, y=0, width=512, height=512);但从优化的角度来说,一张贴图可以由多个 Sprite 所共享,在加载的时候只需要一次 IO,且在渲染的时候,可以共用一个 Draw Call 。在这种情况下,在同一张贴图上使用不同的矩形框就能呈现出不同的 Sprite,例如:

  • Rect(x=0, y=256, width=256, height=256)
  • Rect(x=256, y=256, width=256, height=256)
  • Rect(x=0, y=0, width=256, height=256)
  • Rect(x=256, y=0, width=256, height=256)

以上 4 个矩形把一张 512 * 512 的贴图分割成 4 个精灵。

还有一种情况是,游戏引擎在优化资源的时候,可以把原来单张的贴图自动或手动合并成一张独立的大贴图来达到同样的优化目的。

理解位图字体

位图字体即 Bitmap Font ,将预制的字符以图片的形式渲染在画面上的字体方案。由于是图像,所以支持各种静态的字体特效,例如描边、阴影、渐变等。可以使用许多第三方工具制作而成,最终生成两个文件:一个是包含所有字体图像的图集,另一个是描述字符在图集中的位置、大小以及字体信息的描述文件。

经过搜索,得知使用最广的方案是 Andreas Jönsson 提出的 bmfont 也就是常见的 fnt 格式的位图字体。在他的网站 angelcode.com 对这种格式提供了详细的文档介绍:位图字体规格说明。此外,71 Squared 还对些扩展并提供了多种格式的方案:Bitmap Font File Format

Unity3d 同步/异步加载资源

在游戏中,加载资源可以分为同步加载(sync)与异步加载(async)两种方式。同步加载易于使用,无需特别组织代码结构,加载过程会阻塞线程,好处是之后的代码可以立即使用加载后的资源:

Texture tex = LoadSync("background.png") as Texture;
image.texture = tex;

既然同步加载会阻塞线程,也就表明,如果在游戏过程使用同步加载的方式去加载较大的资源,会导致游戏掉帧,甚至卡顿,影响体验。

这时候就可以使用异步加载的方式来加载资源。异步加载有代码组织上有多种选择,一种是回调的方式:

LoadAsync("super-big-backgroud.png", (Object data) => {
    image.texture = data as Texture;
});