Gravity Voyager Making of: Starry Background and Node-based Image Compositing

(Warning: Nerd Content Ahead)

In making of my game: Gravity Voyager, one of the biggest challenge is making a feel of dreamlike, fantastic starry background. Finally I think that I have achieved the goal and now I want to share some experience, particulary node-based image processing.

Firstly what is image compositing? When you are adjusting hue/saturation, curve of a photo, or combining two image into ones in Photoshop, you are doing image compositing. Of course, I made the starry image resource used in my game used a lot image compositing trick. But rather than Photoshop, I used … Blender, a free 3D software package to make it.

Why using Blender instead of Photoshop to make it? Because Photoshop is a layer-based image editing appilication. If things goes complicated, it is almost impossible to manage the relationship between images/filters/adjust operations. See this:

This is the final composition node graph of the starry image resource. If I had used Photoshop to make it, it would drove me crazy. Using node-based instead of layer-based compositing makes the flow of image

This is the image resource of starry background used in the game (Note: the background is actually transparent. The purpose of using black backgound is just making things obvious).

Then I'll show you how the image was made in Blender briefly. The scene of this Blender project is fairly simple: a transparent plane with some spheres, an orthograph camera facing down toward negative-Z axis. I used particle system to add spheres on the plane:

The material of the spheres represented stars is like this, also done using node graph:

It is a relative simple node setup and I'll begin my explaining of node-based composition based on it. You can interpret the concept of node as a processing unit. It takes some input and generate some output based on the input you give. Blender provides variaty nodes, such as RGB curves, MixRGB, Blur. And it isn't necessary that a node should have both input and output. The nodes such as Render Layers, Color don't have input because itself provide information and is the begining of the node flow and Material Output, Composite node don't have output because itself is the end of the node graph.

A node can take another node's output as its input, and generate output as the third node's input. This kind of relation of nodes represented by using lines connected with each other. A node setup should be read from left to right. However before you read the node setup of the star material, we should discuss what kind of result should we aimed for.

We should apply some color to these stars. The physical accurate result can achieved by using a Blackbody node. A Blackbody node takes a numeric input: Temperature (in Kelvin) and provide a color as output. Lower temperature input will result in a more reddish color and higher temperature input will give a more bluish color. If the temperature you give as input is 6500, it will result a exactly white color. It is behaved like real stars (red drawfs have low surface temperature and reddish surface color, on the contrast blue giant have high surface temperature and bluish surface color) and so we should use a Blackbody in our node setup.

But apparently the color and brightness of the stars should be different with each other. We introduce a random variable range from 0 to 1 and denote it as X. We hope the temperature of the Blackbody node input range from 1000 to around 14000 (so that red, white and blue stars will appear at same time) and the brightness of stars also should varied.

Then the formula of final color can be given:

Color.RGB = Blackbody(14000 _X + 1000)  
Color.A = 2_ X + 0.05

And now we can put nodes into the node editor and connect with each other accroding to the formula above. Have a look at the final node setup again:

You can see at the begining there is a Object Info node. It gives each star a random number ranged from 0 to 1. Then it pass through a set of mathematical operation as the formula above. Finally be convert to a color by a Blackbody node and be the color input of the Emission material node.

You must notice there is a RGB Curve node. Usually a RGB curve node work exactly as Photoshop's RGB curve adjustment do. But in there, it change the distribution of random variable X so that more stars should be appear white, rather than blue or red. If you are a math guy, you may know it is a inverse of Comulative Distribution Function (CDF) for the Normal Distribution. We denote it as InvNormCDF(). InvNormCDF(X) which X is a random variable with uniform distribution will result in a new random variable with normal distribution.

Then the formula following represents the meaning of our node setup.

Color.RGB = Blackbody(14000 InvNormCDF(X) + 1000)
Color.A = 2
InvNormCDF(X) + 0.05

If we render the scene. The result ("raw" image) should be like this:


As you can see, the color of stars is varied. You may wondering why there is no blue star. In fact, some star is blue but its intensity is too strong that out of color represent range of PNG file so it appear white in our PNG file. But in Blender inner image format that with 32 bits per channel so the color of the image was represented correctly.

Processing the "raw image" into the image that was used in the game also done by using node graph. If I explain the nodes and relation between each other in the compositing node setup one by one, this article will be too long and borning, I'm sure that you dislike it. So instead explaining in detail, I'll show you some picture of the node setup:

These node's name is quiet self-expanatory. Glare node is a filter node that generate glare on the input image. RGB Curve node make some color adjustment using curves, similar to the function in Photoshop. Blur is a filter node too and I think it don't need to be explained. Alpha Over is blend two images into one by their Alpha channel, just as put a image on the top of another image in Photoshop, or put one layer on the top of another layer. Multiply node is combine two image that each color channel of pixel are multiplied by another pixel's, work exactly like "Multiply" operator of Blend Mode function in Photoshop, Illustrator and other image/video editing software packages.


Now let's see the final starry effect:

As you can see, there is aurora in our scene. To make the aurora, I wrote some custom shader code to achieve the effect like this. Shader is a small program running on the GPU. It determines how a model/sprite should be rendered.

I'll show the essential part of the shader code below.

        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _UpperColor ("Upper", Color) = (0,0,0,1)
        _DownColor ("Down", Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
        _Alpha ("Alpha", Range(0.0,1.0)) = 1.0
        _Pow("Power", Range(0.0, 1.0)) = 1.0

This part tell Unity that there are 4 varibles should be exposed in the Unity Editor: A texture, two color: Upper and Down, a opition for whether turn on pixel snap, an number indicate image alpha channel, a number (power) that control how the gradien goes.

Now the shader's information in Unity editor's inspector is look like this:

Next let's check out this line of code:

Blend One One

It specifics the factor of alpha blend between our sprite and background is both 1. The default of alpha blend factor is 1 and (1 - alpha of source), i.e. Normal alpha blend method. It will makes our aurora and starry sprites more clear and bright.

fixed4 frag(v2f IN) : SV_Target
 fixed4 c = fixed4(
 c.rgb *= c.a * _Alpha;
 return c;

This part is the so called Fragment Shader. It is the most important part in the shader code. It takes Vertex Shader output as input and process it and generate a color for a fragment (its concept is similar to pixels but not exactly same). GPU calls fragment shader once time per fragment.

In this fragment shader, it takes a input (INPUT) that type is a struct called "v2f". The struct v2f contains a important member: texcoord, represents Texture Coordinate (UV). It returns a fixed4 (4D mid-precision float array) represent a 32 bits per channel RGBA color.
The RGB part of return color is based on linear interpolating (lerp) between Upper and Down color we already given along texture's y axis (vertical direction). The interpolant of the linear interpolating is the value of fragment's texture coordinate's Y component raised to the power "_Pow"". And the alpha part of fragment's color is using tex2D() function sampling aurora sprite texture's alpha channel in fragment's coresponding texture coordinate. Finally let the color's RGB channels multiplied by given _Alpha factor and return it to GPU. This is how the shader works. It turn this "raw" Alpha only image resource:

into something like this:

Now we get the desired render result finally. The expaining above maybe complicated. But if we draw a node graph according to the given code, things will be seen clearly:

To conclude, intead using layer-based software like Photoshop, you may try using node-based compositing software. It is easy to organize and manage a large and complex project. Hope this article can give you some inspiration.

How To Create Seamless Audio Loop For Your Game

Creating games involves a lot of problems, and creating a seamless audio loop clip is one of these. For example, you need some ambient background sound clips to bring your scene to life, or you need a nice car engine "Vroom~" sound.  When I started trying to figure out how to do this, I feel really awkward. Luckily, I found a simple solution. Now, I am trying to explain in plain, in simple form. (The software I used is Ocenaudio, it is cross-platform and free, you can download at here:

I'll use a 10 seconds rocket thrusters sound clip in example.

Step 1: Trim

10 seconds is a bit long and we don't need. So at first, we should trim this clip to a shorter one, about 4 or 5 seconds is enough:Screen Shot 2016-01-14 at 9.42.21 PM

after trim:

Screen Shot 2016-01-14 at 9.42.44 PM

Now this clip is clamped to about 5 seconds. But if you play this clip, you will hear a obvious  "glitch",or "gap" or "pzzz" at the end and begin of the clip. So we can't use it for now, and we must fix it.

Step 2: Break the clip in the middle.

To fix the problem above, we should break the clip in the middle. At first, we select the first 1 second of the audio clip, then cut and paste at the end of the clip:

Screen Shot 2016-01-14 at 9.43.55 PM

Screen Shot 2016-01-14 at 9.44.37 PM

The purpose of this step is to ensure the audio loop is continuous at the very end and begin of the clip. Now, if you play the audio clip, you will notice there is no glitch when the progress bar reach the end of the clip and back to the beginning. However, you will also notice you create a new glitch in the middle: where the very location you just cut and paste. Because you just broke the clip into two segments, joined the end of a segment with the beginning of another segment, it created discontinuity at this point.

You may also find there is a strong peak at the join point in the Spectral View. The reason of the peak exist is there is a abrupt change of the audio wave, create a high frequency part in this location.


How to eliminate this peak? Maybe using low pass filter (the "Gaussian Blur filter " for audio wave)? Sorry, you can't use low pass filter to fix this problem because you will create glitch at the very end and beginning of the clip. Ahhh!

Step 3: Prepare to blend two segment.

Unluckily, you can not remove the high frequency part directly in this software (But you can use Adobe Audition to remove it instantly). So, we have to blend two part of the clip seamless. Now, select the part after join point for 0.5s long:

Screen Shot 2016-01-14 at 9.47.41 PM

and apply Fade In effect. The volume of audio in this part will change zero to normal gradually. (Sorry, I just find forgot taking a screenshot)

And select 0.5s of clip before the join point:

Screen Shot 2016-01-14 at 9.49.15 PM

Apply Fade Out effect, let the volume change from normal to zero.

Step 4: Cross fade two part of the clip

Now, it's time to blend two segment. Select all of the part after the join point:

Screen Shot 2016-01-14 at 9.50.53 PM

Cut it to pasteboard. And locating the pointer to 0.5s before the join point (now the join point is the end of this segment):

Screen Shot 2016-01-14 at 9.51.35 PM

then, overlap the part in your clip at this point (use Paste Special function of Ocenaudio). Since this audio clip is just about a kind of noise (sound of rocket thrusters), we can overlap safely without worrying other things:

Screen Shot 2016-01-14 at 9.51.59 PM


Now it should have no obvious glitch or gap or other "strange feeling". And you can use it in your game project directly.

The Missing Editor for Unity Development: Visual Studio Code

Recently, I am working for my own game project, using Unity. I used Unity for almost 5 years. Unity is great, it make game developing a lot more easy and enjoyable. But there is a problem that annoyed me so long: I can't find a great editor for coding (in C# script). The default IDE of Unity, MonoDevelop, is awkward for use: it take long time to launch and has a terrible user interface. I have also tried Sublime Text and Vim, but both of them have some issue. Then, Microsoft brought Visual Studio Code. I used it since the day it was introduced and I must say, it is like "giving a glass of ice water to somebody in hell" for Unity developer, especially if you are using Mac.

Microsoft made Visual Studio Code a cross-platform editor. Whether you are using Windows, OS X, Linux, no problem, you can use it in your own computer. Also, it is free, just download, unzip and start coding.

Unlike MonoDevelop, Visual Studio Code is a lightweight IDE. It launch instantly, scrolling and navigating fluidly, have low CPU and memory usage. It have clear, modern, highly-polished user interface, support Full Screen mode in OS X, just like Sublime Text.

Getting Visual Studio Code integrating with Unity is fairly simple: get the plugin, put it into your Unity project, enable it in the Preference window, done, see the official guide. After integration, Visual Studio Code works well with Unity. Double click the error and waring hints in Unity, it will jump into the right place in the Visual Studio Code editor window.

Visual Studio Code have plenty features works perfectly such as code colorization, bracket matching, IntelliSense, split view and so on. I love features called "Code Lens" and "Peek": you can see the number of references to an method directly above the method, and you can click it to show where the method is used:

Visual Studio Code - Code Lens and Peek

I use C# script as programming language in my own Unity project and the syntax highlighting works well with C# script. I also wrote some custom shaders for fascinating 2D visual effects. Since version 0.8, Visual Studio Code support code highlighting of ShaderLab:

Syntax Highlighting of ShaderLab

If you are using Visual Studio Code on Mac, you can debug right in the Visual Studio Code. Of course, it's great!

Since these great features, Visual Studio Code is definitely the missing editor for Unity development. Good works, Microsoft!

被遗忘的微软黑科技:3D Movie Maker

pc-49329-21357120872 (题图来自 Microsoft/Nickelodeon 3D Movie Maker with Extras • Windows Games • Downloads @ The Iso Zone


大家知道,微软的主要业务是销售软件、服务。在历史上,微软曾经推出许多有意思的软件产品,可惜一大部分被 Windows、Office 等成功产品的光芒掩盖住,至今鲜有人知了。今天在这里说的就是一例:微软的 3D Movie Maker (注意:不是 Windows XP 系统自带的那个 Movie Maker)。


这个软件干嘛用的呢?可以让用户创作一个三维动画。不过跟 Maya 那些大家伙不同,3D Movie Maker 内置了一些预制的场景、角色模型。软件可以控制视角切换、可以加入音效、音乐、文本、VFX 等来让动画内容变得更加丰富有趣。软件的界面同样是基于 3D 场景的,比如要查看自己做过的动画,可以去 Theatre 场景。这样,用户可以轻松地制作一个三维动画来讲一个故事,不必去学 Maya, 3Ds Max 那些大家伙:

屏幕快照 2014-11-30 下午12.44.10 屏幕快照 2014-11-30 下午12.44.43 屏幕快照 2014-11-30 下午12.45.00 屏幕快照 2014-11-30 下午12.45.34 屏幕快照 2014-11-30 下午12.46.40 屏幕快照 2014-11-30 下午12.47.02 屏幕快照 2014-11-30 下午12.47.23 屏幕快照 2014-11-30 下午12.48.07




第一,这个软件是 1995 年发布的。那时 DOOM II 刚上市两年,Duke Nukem 3D 和 Quake 还没出来。这个软件的人物模型全部是纯 3D 的,一年后出来的 Duke Nukem 3D 里,小敌兵都是一些 2D 纸片(学名叫 billboard)。

第二,这个软件连小孩子都能很容易学会。根据上面那个视频作者的描述,他做出这个视频时只有 13 岁( I was 13 when I made this, I'm done with 3D animation, as I am now focusing on video editing.)。就算到了现在,如果要是想做一个三维短片的话,那么必须先去挑一个三维动画软件学几个月去,然后才能用软件去讲一个故事(想想「学了三年动画的朋友」那个梗)。

微软在将近二十年前,就可以让小孩子们去做一些三维动画讲故事。从今天的眼光看,虽然这个软件肯定不足的地方太多了,比如 3D 模型只是加了 color map 就完了,连 shading 都没有,不过依然实在是一件了不起的事情,称其为「黑科技」应该不算过分。现今,依然没有在市场上取得成功的,平民化的 3D 动画软件,哪怕只有一款。可惜,微软在十多年前就放弃了这个项目。现在这个软件的安装 ISO 光盘镜像很容易下载到。如果你家里还有 Windows 95 OSR2 版的安装光盘的话,里面也有一个试用版的 3D Movie Maker 安装包。据说可以运行在 Windows 7 上(我用的是 Mac 就没有去试),有兴趣可以找一个安装包装上玩玩。

iPad Air 2,你值得拥有

要是说我最喜欢的商场,无疑就是西单大悦城了。Apple、MUJI、优衣库这些品牌的店面都有,而且就在地铁四号线边儿上,无论从大兴还是丰台过去都特别方便。上周六,去大悦城的优衣库买了几条裤子,然后到楼下的 Apple Store 去买了一个 Misfit Shine。期间在地下的店面里把玩了一下新上市的 iPad Air 2,很想说,无论是从实际体验还是从硬件参数上来说,这一代 iPad Air 是非常值得购买的。 在 9.7 寸屏幕的 iPad 上无论做什么事都很合适,可是重啊。所以 2012 年 iPad mini 发布后,尽管没有视网膜显示屏,尽管硬件参数只是一年多前 iPad 2 的水准,却仍然成为(截止到当年)卖的最快的一代 iPad。无他,就是轻薄,可以拿在手里更长时间。同时我们也看到,从初代 iPad 到 iPad 2,从 iPad 4 到 iPad Air,尽管之间 iPad 2 到 iPad 3 以及 iPad mini 到 iPad mini 2 稍增加了厚度和重量,大体趋势上苹果也是在尽可能让 iPad 变得更加轻薄。当然,每一代的 iPad 都会提升处理器和图形性能,并且坚守从初代 iPad 起的十小时电池续航时间不动摇。作为从初代 iPad 过来的用户,每次看到 iPad 更新都会感觉苹果给自己脖子上套的绳子越收越紧了,因为体积重量、性能、续航这三者是背道而驰的目标。尤其是去年 iPad Air 发布后这种感受更深,感觉 9.7 寸的平板应该也就这样了。

不过刚刚发布上市的 iPad Air 2 仍然带来了惊喜。最大的惊喜当然是厚度和重量进一步减小了。厚度不到 7mm,只有 6.1 mm,重量仅 437 克。可能这个数据有些抽象,那么说一些 facts 吧:

  • iPad Air 2 的厚度和 iPod touch 近乎相同,都是 6.1 mm。
  • 两个 iPad Air 2 摞起来的厚度也薄于初代 iPad。
  • iPad Air 2 比初代 iPad 轻出了两个 iPhone 5/5s 的重量,还多。
  • iPad Air 2 相对于 iPad 3/4 大致轻出了一个 iPhone 6+ 的重量。

实际上手体验同预想中的差不多。作为已经习惯了 iPad 3 重量和体积的用户,把 iPad Air 2 拿到手里的感觉惊艳地难以置信,是一种与以前把书本、把前几代 iPad 拿在手里时完全不同、从未有过的体验。双手拿着相当舒适,即使用一只手也可以拿住很长时间。

我个人一直感觉苹果有些鸡贼,即每一代产品总会留一些让人不爽的地方,比如上一代 iPad mini 2 发布时看着什么都好,结果发售后一看,屏幕不是像其他大部分苹果产品一样使用 sRGB 色域的;又比如今年发布的 iPhone 6/6+ 什么都好,就是内存仍然只有 1GB,等等。上一代 iPad Air 也是如此,没有用上 iPhone 5s 里采用的指纹识别模块。这一代的 iPad Air 2 总算用上了。对于手机、平板电脑等设备来说,是否设置密码是一个让人十分纠结的问题。因为手机、平板电脑可能用户每天会看很多次,并且是比较零碎地去用,设置了密码就要在每次使用前都输入一遍,让人感觉很不爽;但不设置密码又怕设备丢了或在你上厕所时,里面的微信/短信信息、邮件、照片、通讯录、Pages/Numbers/Keynote 文稿、Safari 里的知乎帐号等信息被人分分钟看光。现在大多数解决方案总不令人满意,比如四位数字密码用计算机破解起来很快,手势密码很不优雅且容易重复、难以记忆(在此鄙视支付宝 iOS 客户端产品设计师)。iPad Air 2 上了指纹识别模块后就顺利的解决了这个问题,兼顾了个人信息安全与方便。

iPad 4、iPad Air 的性能都是当时逆天级水准,这一代 iPad Air 2 也不例外,发售后的各路测评都证明了这一点。在 Apple Store 试用时我特地留意了输入文字和浏览网页的流畅程度,iPad Air 2 表现均令人满意,在用默认输入法输入中文和英文时,不像 iPad 3 等性能一般的机型那样有明显延迟;浏览网页时滑动网页视图几乎感觉不到卡顿,即使是浏览 Apple 官网那样图多并且分辨率大的网站。在 iPad 3 提升设备内存后,iPad Air 2 总算再一次提升了设备内存到 2GB,意味着后台可以放着更多的 App 而不用因为内存不足清除出去、 Safari 可以打开更多网页、游戏里的模型、贴图精度可以更高,等等。别忘了 iOS 8 拥有一个全新的图形 API——Metal,相对于 OpenGL ES 去掉了一些冗余的部分,并改善了一些设计,如 Shader 不必在运行时被编译等。因此运行效率远高于 OpenGL ES,特别是大幅度减少了流水线渲染时 CPU 的占用,让 CPU 可以更好地去处理游戏逻辑等。目前几个主流游戏引擎都将支持 Metal,开发者使用 Metal 特性、把以前的游戏移植到 Metal 平台上也挺方便,最流行的 3D 游戏引擎 Unity 表示开发者「几乎什么都不用做」 。因此可预期即将会有大量基于 Metal 的精美游戏出现。iPad Air 2 从硬件和软件方面深度挖掘了潜在的性能,在 iPad Air 2 上做重性能任务(如剪辑视频)、玩游戏的体验十分让人期待。

iPad Air 2 还改进了摄像头。其实个人觉得从 iPad 3 开始,摄像头就挺让人满意的了。这一代 iPad Air 2 把原先就挺不错的摄像头弄得更好了,再加上 sRGB 色域的 9.7 英寸大屏幕,在 iPad Air 2 上拍摄、观看照片、视频的体验会达到更高的水准,虽然总觉得不会有多少人会经常用 iPad 拍照吧……

可以看到,这一代 iPad Air 2 在各个方面都达到了相当高的水准,几乎找不出有任何明显的短板。The Verge 的评测给了 9.3 的高分,(The Verge 现在评测过的所有产品最高分就是 9.3),在缺点那里, The Verge 给的评价是「没有多用户、没有多任务、Safari 的图标仍然太丑」,让人感觉是「该死实在找不出什么缺点但作为评测不能没有所以再从鸡蛋里努力挑一根骨头出来吧」。对于这一代 iPad Air 2,最后还有一个 bonus:去掉了 32 GB 的机型,64 GB 机型价格降到了与原先 32 GB 机型相同。那么综合看来,如果想换新的 iPad,这一代 iPad Air 2 64GB 机型十分值得入手。要是说缺点,就是——

要买哪一个 iPad 这个问题变得更让人纠结了。到底是这一代 iPad Air 2,还是 iPad mini 2,还是明年会出的 iPad Pro?……


另,文末再说说把玩 iPhone 6/6+ 的体验。

iPhone 6 初次见到,看到其大屏幕时,想到这那么大是不是就是 6+ 啊,然后脑补了一下 iPhone 5s 的大小才反应过来这是 6。由于屏幕长宽比相对于 5s 没有变化,即使是初次使用也没有感觉任何怪异感,只是觉得屏幕内容看着更加舒展、更亮堂了。用 iBooks 浏览英文电子书时,竖屏仍不理想,阅读时每行仍只有几个单词,换行还是太频繁。不过横屏浏览体验却很好,5s 横屏使用时那样的憋屈感不太容易感受到了。

「果然是 bigger than bigger……」,这是初次看到 iPhone 6+ 的想法。由于 iPhone 6 和 6+ 在软件层面的分辨率(按 point 计算)是相同的,App 在 6 和 6+ 上的界面布局是一样的,只是 6+ 上更大一些、更精细一些。iPhone 6+ 的渲染分辨率与显示设备分辨率是不相同的,后台会以 1242x2208 这个分辨率渲染界面,然后缩放到 1080x1920 分辨率的屏幕上。这带来一个问题:iPhone 6+ 的界面无法做到像素精确,直线会出现「虚边」。不过不用担心,实际使用时却几乎不会感受虚边带来的不爽感,可能是因为 iPhone 6+ 的分辨率超过 400 PPI 吧。

iPhone 6 仍然很适合单手使用,甚至由于屏幕变得更大,使用虚拟键盘输入文字相对于 5s 更舒适,更准确。不过手指的确很难够到屏幕上方的物件,比如 navigation bar 上的返回按钮。虽然有点两下 home 键把界面拉下来这个功能,但需要适应。iPhone 6+ 就完全无法单手操作了,如果对这一点很在意的话,买 6+ 之前请三思。

两个 iPhone 都是黑色的更漂亮一些。这一代 iPhone 屏幕的对比度变得更高,黑色可以显示得更暗。在显示以纯黑色为主,如系统内置的指南针、股市等界面时,会感觉 UI 界面融入进 iPhone 机器硬件上,界面与机器的边界消解掉了,希望软件开发者、UI 设计师能更好地发挥这一优势。在显示白色为主的界面时,不会像白色版看上去从里到外是白色机器—黑色屏幕边框—白色 UI 那样的感觉。黑色曲面屏幕边缘反射高光效果很令人着迷,感觉既神秘又圆润。如果用过白色机型的苹果产品,会知道白色没有想像中的完美,比如听筒、指纹感应器周围很容易看到阴影、金属(指纹识别器)的反射焦散;黑色版就不会出现类似这样的情况,正面看上去浑然一体。

两款 iPhone 手感都很好,曲面屏幕、铝合金机身、塑胶天线三者浑然一体,圆润的手感让人想起 iPhone 3GS、iPod touch 等。背面的塑胶天线实际看上去确实不好看,但也没有那么的不好看,三色机型中依然是黑色的背面更耐看一些。不过凸出来的摄像头确实挺丑,无论是看照片还是看实物。重量都还好,即使是 iPhone 6+ 也没有想像中的很重。


下一篇会写关于 Misfit Shine 的使用体验,敬请期待 :-P

Macintosh 与桥口五叶

众所周知,苹果公司的联合创始人——Steve Jobs 相当喜欢日本文化。在 1984 年初代 Macintosh 发布时,为了宣传,他请人拍摄了这张著名的照片: 205729-steve-jobs-1984-macintosh-1

照片中,Steve Jobs 西装革履,自信十足。放在他前面的,即是三台新鲜出炉的初代 Macintosh,展示了不同的用户界面。

有一次,在看到这个图片时,想到了一个问题:中间那台 Macintosh,屏幕里梳头发的女人那张浮世绘图片,有什么故事吗?于是 Google 了一番……

那张图片的确是日本浮世绘,创作者是明治大正年间的艺术家,桥口五叶(はしぐち ごよう,Hashiguchi Goyō)。

桥口五叶生于 1881 年,出生在原属萨摩藩的鹿儿岛县。在 1905 年,他以最优秀的身份从东京美术学校毕业。毕业后,他接到的第一份委托,就是给日本文豪夏目漱石(一千日元纸币上的那个人)的那本著名的小说——《我是猫》绘制插图。在 1911 年,他参加了三越吴服店的广告悬赏大赛,并靠这个作品获胜,并获得了名气和一千日元的奖金:


从此,他开始对日本传统浮世绘艺术产生了浓厚的兴趣。为此,他研究了喜多川歌麿、鈴木春信等艺术家的作品,并撰文讨论浮世绘理论。在 1915 年,他响应了艺术家渡边庄三郎的「新版画」运动。




桥口五叶曾于东京美术学校学习过西洋艺术的技法,又曾研究过日本传统浮世绘艺术。因此,他的作品融合了东方和西方的艺术风格,独具魅力。在 1915 年,他为渡边绘制了《浴場の女》:




1918 年创作的《美人自拍图》,哦不对,是《化粧の女》……



1920 年创作的《梳头发的女人》(「髪梳ける女),他的代表作之一。

然而,1921 年,桥口五叶就因病逝世了。故没有留下太多的作品,他本人也因此没有成为一个十分出名的艺术家。在任意一个搜索引擎里搜索,都不能找出太多关于他的资料。他的部分作品可以在这里看到:橋口五葉 - 浮世絵検索

不过,几十年后,桥口的作品被 Steve Jobs 注意到了……

Macintosh 最令人瞩目的特性,无疑是人性化的图形用户界面。在 Macintosh 系统里,不存在像 DOS 等系统里的字符模式,一切全部用图形表示。苹果电脑为 Macintosh 开发了绘图软件 MacPaint 和 MacDraw。MacPaint 的包装盒封面和使用说明书里,用到的展示图片就是桥口的《梳头发的女人》。在 Macintosh 的发布会上,也有所展示:

根据 Macintosh 的界面设计师 Susan Kare 所述,在 MacPaint 里展示的黑白像素画,是 Bill Atkinson 扫描的,用于扫描的原件正是 Steve Jobs 收藏的。

在去世后数十年,桥口的作品因 Macintosh、Steve Jobs 而被更多的人看到并喜欢上。如果泉下有知,他应该会为此感到欣慰吧。





或许对于创意工作者来说,最可怕的状态,不是糟糕,而是平庸。 平庸是什么?平庸就是,你所做出来的东西,不仅是你的,还可以是任何人的。一个姓张的歌手唱的歌,要让另一个姓王的歌手唱,没有任何「违和感」。甚至,让姓 Elise 的歌手用英语来唱,让姓 Kim 的歌手用韩语唱,让姓伊藤的歌手用日语唱,依然感受不到多少「违和感」。这就是平庸。






使用 Adobe Illustrator 做 UI 设计系列教程

最近,我在知乎上写一套有关如何使用 Adobe Illustrator 做 UI 的一系列文章。 从 2012 年初,我一直在使用 Adobe Illustrator 做设计。现在写的这些文章,是这两年自己学习经验的精华总结。


  1. 使用 Adobe Illustrator 做 UI 设计——前言
  2. 使用 Adobe Illustrator 做 UI 设计——多重填充与多重描边
  3. 使用 Adobe Illustrator 做 UI 设计——切图、导出的秘诀
  4. 使用 Adobe Illustrator 做 UI 设计——灵活使用参考线
  5. 使用 Adobe Illustrator 做 UI 设计——在 AI 中使用内阴影效果,及其他
  6. 使用 Adobe Illustrator 做 UI 设计——效果、外观面板和质感表现(上)
  7. 使用 Adobe Illustrator 做 UI 设计——效果、外观面板和质感表现(中)

为什么现在没把这些文章发到我自己的这个网站上?因为最近我的网站有些故障,图片可以上传但显示不出来,正在努力排障中。另外,WordPress 的后台写作页面实在太乱了,在 WordPress 里写东西实在影响心情。再多抱怨一句,为什么像 Medium 和知乎专栏那样,让作者能够干干净净地写作、读者干干净净地阅读这样的网站就那么少啊。







由于火星距地球较近,因此人们在探测完月球、金星后,自然而然地把目标定为了火星。然而,美国火星探测器「水手 4 号」却传来了坏消息:火星和月球一样,表面都是坑坑洼洼的荒漠,根本没有什么运河。虽然有大气,但大气极其稀薄。表面由于缺乏空气和液态水,在夜间冰冷无比。在这种环境下,几乎不可能存在生命。于是人们对火星生命及火星人的想像破灭了。






为了准确模拟火星的地形地貌,在这里,我使用了 Blender 软件来对火星进行建模并渲染出图。建模、渲染过程部分步骤依照 Andrew Price 的教程:Create a Realistic Earth 来做的。下面简单介绍一下大致的步骤。

首先,火星大致比较像一个球体对吧,那么我们首先就从一个球体开始。在 Blender 里新建一个经纬球,把段数和环由默认的 32 和 16 改为 64 和 32,并把显示方式改为「光滑」,来让这个球体看上去不是一个多边形块。接着,给这个球体加上一个「表面细分」修改器,这些的目的是通过提高球面多边形的精度,来尽可能准确地模拟火星地貌情况:

屏幕快照 2014-01-14 下午11.46.02

屏幕快照 2014-01-14 下午11.46.21

屏幕快照 2014-01-14 下午11.47.24

通过查阅类似维基百科这样的资料,可以知道,火星的赤道直径大约 6792.4 KM,从两极测算的直径大概为 6752.4 KM。所以,为方便起见,把球体的 X,Y,Z 大小改为 67.924, 67.924,67.524。更改球体大小后,别忘了使用快捷键 Ctrl+A 来应用缩放,使模型 X, Y, Z 方向的缩放系数均为 1.



经过一番 Google 后,找到了这样一张图:



有了这张图后,要想个办法把这张图按照某种规则映射到火星模型表面上去。这个步骤,可以通过给模型做一个 UV 展开来实现。3D 软件里做 UV 展开,可以理解为剥橘子皮、展开火柴盒这样的事情,即把立体模型的表面按某种规则对应到一个平面上去。这张高度图是按照墨卡托投影法制作的。关于如何在 Blender 里对球体按照墨卡托投影法展 UV 可以参照这个方法来做:How to get perfect UV sphere Mercator projection? 。为节省篇幅,具体怎样做就先略过了。总之,展开完 UV,并做映射后,结果差不多应该是这个样子:

UV Unwarp

球体与高度图的映射关系搞定后,就要实际使用高度图做出地理效果了。在 Blender 里,可以使用置换映射(Displacement Map)修改器,来根据指定贴图的灰度改变模型的几何形状。即浅色的地方让它凸起来,深色的地方让它凹下去。现在,出现问题了:具体要凹下去凸起来什么样的程度呢?我们要做的是尽可能精确模拟火星的地形地貌,因此要避免出现本该是 6000 米高的山峰被模拟为 12000 米的,而本应是 -1000 米深的峡谷被模拟成 -3000 米深这样的差错。

Blender 是这样根据具体多少凹凸效果的: 凹凸量 = (灰度值 - 中值) x 强度。其中,灰度值的取值范围是 [0,1],即全黑为 0 全白为 1. 如果高度图某一点的灰度为 0.4,强度为 1,中值为 0.5 的话,那么可以算出凹凸量为 -0.1, 即该点处要下凹 0.1 个单位大小。如果某一点灰度值为 0.7,强度为 2,中值为 0.4 的话,根据计算那么该点会上凸 0.6 单位大小。由这个公式可见,灰度值小于中值的地方会下凹,大于中值的地方会凸出,并且最大的高度差值正好就是强度的大小。

知道凹凸量的计算方法后,一切就简单了。火星最高点奥林帕斯山与最低点希腊平原之间的高度差差不多正好是 30 千米。而在我们的模型里,单位映射的规则是真实世界的 1 千米 = 虚拟世界的 0.01 单位. 这样,很容易看出,在虚拟世界里,最高处和最低处的高度差为 0.3 个单位。据此,强度我们取 0.3。我们希望灰度大于 0.5 的地方凸出去,小于 0.5 的地方凹下来,因此中值取 0.5。其它方面,纹理我们指定为高度图,方向保持为法线方向不变,贴图座标系改为 UV:

Displacement Modifier



凹凸弄好后,我们给火星表面加上水看看吧。再新建一个经纬球,作为水面球体来用,通过更改段数和和环并添加修改器,来提升球面的精度。和火星表面模型一样,将着色方式改为光滑。然后把水球大小设为火星表面球体模型的大小,来让洋面「覆盖」火星表面。最好再给水球的视图颜色设置为蓝色。再根据这个大小等比缩放来调整水覆盖到底多少火星表面。注意,由于实际上火星模型的凹凸效果相当细微,因此一点点的缩放,「洋面」的覆盖效果会变化很大,所以在做用缩放调整「洋面」覆盖时,要按住 [Shift] 键来微调。



如果火星模型的表面仅仅是纯色的话,多少看上去有些无聊并有些「假」,所以要给火星表面画上贴图纹理。这个步骤可以在 Blender 内置的图像编辑器里做,也可以用 Photoshop 等软件来画。我在 Pixelmator 里用手绘版大致画了这样的纹理,画出了火星上的极地冰原、森林、草地、高峰、苔原、回归线附近的荒漠等等:


为了让模型看上去靠谱些,也要给海洋画贴图纹理。同样在 Pixelmator 里,我用手绘版简单画了这样的纹理:两极被冰川覆盖,中间为纯海蓝色,毕竟火星轨道半径要比地球大,因此表面温度会低不少,使得极地的冰原覆盖会更广一些:






如果火星有温暖的大气层,并且有丰富的液态水资源的话,那么天空上一定会有类似地球上的云雾了。所以我们要给我们的星球加上一些云雾。再新建一个球体作为云雾球,把球体的大小调整到比火星略大一些,使云雾能够覆盖火星表面。然后在 Google 里搜关键词 "World cloud map",即可找到以黑白呈现的地球云雾分布图。我们选这样一张来用在映射到我们的这个火星模型上:




到此为止,模型和材质做的差不多了。剩下的是要准备渲染出图了。删掉场景默认的灯光,新建一个日光光源,光源的强度设置为 2,方向为向下 25 度(即火星「夏至」时的日照角度,也是火星的黄赤交角);摆好相机,令相机正对火星中心;将虚拟世界的背景设置为纯黑色,渲染出图,结果应类似这样:


这张图有一个很不自然的地方:火星周围没有大气光晕效果。所以为了做到更真实的效果,我们需要手工在渲染出来的图上画上光晕。我把渲染出来的图导入至 Adobe Illustrator,然后使用圆形工具、渐变工具和高斯模糊效果做出了光晕效果:








还有,我用的「科研工具」是 Blender, Pixelmator, Illustrator,可能对大多数人来说,都是比较冷门的工具。不过,如果你懂得如何使用 3Ds Max, Maya, Photoshop 这样的工具的话,也很容易做出类似的效果。



  • 火星较地球小的多,并且大陆相对更加集中,因此,火星人的「人种」、民族应该远没有地球那样丰富;
  • 由于火星大陆集中,并且海洋被大量浮冰覆盖,因此相对于地球人而言,火星人的航海技术发展会相对慢一些;
  • 而由于火星重力相对较低,航空技术应相对地球较早出现并发展成熟,航空器的种类应该更为多样化。火星人的远距离出行更多会依赖于航空;
  • 赤道附近,水手峡谷边的陆地更「零碎」一些,这些地方可能会有很多小国、小城邦。水手峡谷为类似地中海一样的内海或内湖,成为火星民族、国家之间的「兵家必争之地」,经常为此而外交纠纷不断,甚至爆发战争;
  • 奥林帕斯山为很多火星民族的「圣山」,奥林帕斯山所在的岛成为火星上的热门旅游圣地;
  • 等等等等……



【旧文】买Macbook Pro两周了,使用感受

注:本文写于 2010 年夏。现将未删减、更正错字、格式的原文发在这里来作为存档。可以和 说说 MacBook Pro with Retina Display (2013 年末版) 作为对比一并阅读。


买MacBook Pro两周了,该写点什么了,那么,把使用感受按部件写出来吧.

因为在买这台电脑之前,用过一阵子Thinkpad x200,所以下文一些地方会将他和她作比较 (以下MacBook Pro简称为"她",Thinkpad简称为"他")


我的MacBook Pro是15.4英寸镜面屏高配版,就是传说中的MC373CH,总的来说吧,还是很不错的,毕竟有一个Intel core duo i7处理器,以及4GB内存,还有两个可以自动切换的显卡,500G硬盘.在以高画质运行<战地:叛逆连队2>时,除了移动鼠标略有延迟外,基本不卡(但这点准星延迟已经能够严重降低游戏体验了),在中画质下运行完全流畅.不过在Mac OS X下玩NDSL模拟器上的<逆转检事>时,CPU负担很重,背景音乐经常变慢,不知是模拟器还是电脑的问题(模拟器是免费的,还是别要求太多了).选择这款MacBook Pro的目的是以后将用她进行3D制图,所以,要选择一款性能强的计算机作为移动图形工作站,而她恰好满足这点要求.ThinkPad的X系列是偏向便携的笔记本电脑,所以针对性能来讲,"她"完胜"他",但是,这样比较没什么意义,毕竟定位不同.


关于苹果产品的外观,还是不多说了,赞!对于"她"也不例外.她采用的是一体的镁铝合金外壳,总体风格简洁清爽.屏幕是镜面屏,关机后看起来尤为迷人.屏幕边缘与iPhone ,iPod touch,iPad类似,都是黑色边缘镶嵌在银色边框里,很喜欢这种风格,这也是我买"她"的理由吧.而且,"她"很薄,虽然没有同族的MacBook Air要薄(人家师妹才是真正的极度轻薄),但是能把如此强大的性能集成在2.4cm左右的厚度里,也是很了不起的事情.手指滑过"她"的铝合金顶盖感觉也非常不错.相比之下,ThinkPad的外观风格与苹果的截然不同. ThinkPad的风格也有很多人喜欢,就是那种玻璃钢碳纤维混合材料带来的黑色高贵,稳重,强健的风格,尤其顶盖和腕托高傲的"ThinkPad"字样更给人一种很酷的感觉.机身正中的TrackPoint(小红点)更是画龙点睛之笔,没有它,视觉上绝对会降一个档次.ThinkPad x200的厚度要比"她"厚出一个屏幕,这让"他"作为一个以便携为卖点的笔记本有些难堪.不过,由于"他"机身内置Roll Cage防滚架,所以厚一些也是可以理解的.可惜,再也看不到那三个彩色字母"IBM"了.


众所周知,苹果电脑的预装系统是Mac OS X,而不是主流的Windows.但是,尽管Mac OS X是个"非主流"系统,可是她无论在外观和内在技术上都超越Windows.从网上无数模拟Mac的美化包,主题包就可以看出Mac OS X外观的人气之旺.在易用性上,有很多人说Mac不好用,但那只是习惯问题.事实上,Mac OS X系统还是非常好学的,上手很快.我上手只用大约一个小时.而且,Mac OS X的人性化之处也无处不在.例如她的"系统设置",总能让你在最短时间找到你所要更改的项目,相对于Windows下那些控制面板,组策略什么把设置一层层埋在菜单里的好用很多.Mac OS X的核心是基于BSD内核的,因此,她具有高度的稳定性,安全性和灵活的内存分配机制;有人说Mac上病毒少是因为Mac的用户少,这种说法是片面的.Mac的内核BSD是Unix类系统.Unix类核心的系统一向对于权限很重视,而且对于帐户的管理也非常严格,因此,Unix类系统经过了几十年的安全性考验,被广泛应用于金融,军事,科研等行业.因此,在Mac OS X下,把病毒什么的都忘掉吧!不过唯一也是致命的缺点就是软件太少了,在国内正版软件和D版的都不好找.希望通过日益增加的苹果用户改变这个局面吧.


"她",MacBook Pro的屏幕是LED背光的,这样有很多好处.第一,色彩非常鲜艳,在镜面屏下尤为明显.第二,屏幕可以做得很薄,"她"的屏幕居然比iPod touch还薄.第三,LED屏幕非常省电,在使用时间上可明显体会出来.此外,"她"的顶盖有一个会发光的Apple标志,那是无可抵挡的魅力啊!在这里还是不要说ThinkPad童鞋的坏话了,毕竟"他"是商务机,屏幕没必要那么好.而且,带着一个拥有重要商业数据而屏幕是178度视角的笔记本在人来人往的候机厅办公,那不仅是恐怖,简直令人毛骨悚然.




嘿嘿,苹果的王牌来了.苹果的官方网站写道"一旦习惯了使用 Multi-Touch 触控板,你一定无法想象没有它的日子。"我在两个星期的体验中深深体会到这一点.过去,总认为触控板是"鸡肋",而苹果改变了我的看法.有了魔术触控板,甚至完全不用鼠标就可完成日常任务.在威锋网的BBS讨论里,也有很多人认为Apple的触控板可完全代替鼠标. 这里与"他"的TrackPoint(小红点)对比一下.感觉小红点指点杆没有魔术触控板好用.首先,小红点的表面是模仿猫舌的,目的是增大摩擦.不过感觉有些扎手.而且,为了同时照顾左利和右利(通俗将就是X撇子),小红点被放在键盘的中央.我个人在长时间使用小红点后手腕比较难受.当然,个人习惯不同,有些人认为小红点还是很精确,很好用的.这里只是说一下我的体验.


说说 MacBook Pro with Retina Display (2013 年末版)



最近,我有幸找到了一个实习职位,实习的工作也是自己一直期待的 UI 视觉设计类。不过,实习单位的位置在东城靠近雍和宫那块儿,和在大兴的家,以及在海淀的学校正好是一个大三角形、哪儿离哪儿都不近这样的关系。我不喜欢乘公交,因为公交给我一种很强的不确定感,你永远不知道下一辆车是要在两分钟还是十分钟来;并且在北京的冬天等公交也十分痛苦。因此,在实习单位、家里、学校之间的通勤方式自然选择了地铁。这样,在每一个工作日,也要背上电脑去挤地铁了,而且经常会赶上高峰期。

不过现在,我不会像以前那样,过于担心坐不上座,而背着几公斤的大包站一个小时多了。因为,我在两周前买了今年年末,在十月 Apple Special Event 上发布的 Haswell 版 MacBook Pro with Retina Display. 现在,希望把这近两周的体验分享一下。


先前,我用的电脑是 2010 年中版的 15 寸 MacBook Pro。新购买的 MacBook Pro with Retina 同样为 15 寸机型。新旧两款的 MacBook Pro 都是 Unibody 铝合金机身,顶面大小区别不大,Retina 版的要稍稍小一些。打开屏幕面板,可以看到 Retina 版屏幕面板下方那里去掉了旧版的 “MacBook Pro” 标识(而是将其移至电脑底部)。并且苹果略微缩减了 Retina 版 MacBook Pro 屏幕边框的宽度。个人对这种改变十分赞赏。因为我不喜欢宽边框,宽边框给人一种厚重的感觉,因此希望边框越窄越好。同时,我也不喜欢一个带有外露标识、Logo 的产品。而 Retina 屏幕的 MacBook Pro 正好满足了我的这两个要求,因此非常赞赏这样的改变。

在接口和外设上,Retina 屏的 MacBook Pro 去掉了光驱、去掉了以太网线接口,正如当年 Apple 给初代 iMac 去掉软驱那样。对于我来说,光驱早已是一个多余的东西。在将近一年半的时间里,我没有用到过旧 MacBook Pro 上的光驱,取消光驱是一个无所谓的事情。学校宿舍那边的 Wi-Fi 质量极差,几乎不可用,所以在学校的话,还是要连以太网到宿舍的交换机来上网。还好,Apple 提供了以太网转雷电接头可供选购,接上后就可以像老 MacBook Pro 那样用网线上网了。此外,原先的 MagSafe 磁力接口也换成了更细的 MagSafe 2 接口。同样,老 MacBook Pro 用户可以购买一个 MagSafe 转 MagSafe 2 接头来继续使用原先的电源。

Retina 版的 MacBook Pro 的厚度和重量是其精彩之处。虽然同旧版 MacBook Pro 在顶面大小区别不大,不过却比旧版 MacBook Pro 要薄不少,将近薄出一个屏幕。即使对于旧版的 MacBook Pro 来说,在今天同其他笔记本电脑比,也并不算厚重。而 Retina 的 MacBook Pro 则在此基础上,进一步减小了机身的厚度。由此不得不佩服苹果的工业设计功力,以及做产品那种工匠一般精益求精的精神。在变薄的同时,重量也减少了很多。与旧版 MacBook Pro 相比,重量的变化是完全可以感知到的。这一点对于每个工作日要乘两个多小时地铁的我,无疑可以称得上是从水深火海之中被解救了出来。与此同时,我把旧的电源放在家里,新的电源放在单位。这样每天就可以仅仅带上 Retina MacBook Pro 外加一个 MagSafe 转 MagSafe 2 接头,顶多在外带一个鼠标出门了,肩膀的负担被大大减轻了。


MacBook Pro with Retina Display 最吸引人的特点,无疑就是那块超高分辨率的显示屏了。并且,超高分辨率仅仅是这块屏幕优异特性之一。对于 MacBook Pro with Retina Deisplay 的屏幕来说,另一个较为容易被忽略但极其重要的特性是,这块屏幕的色域完全覆盖了整个 sRGB 色彩空间,见图:

上图白框是 Retina MacBook Pro 所能显示的颜色范围,内部彩色的块体就是 sRGB 色彩空间的全部颜色范围。可以看到,Retina MacBook Pro 显示色域完全覆盖了 sRGB 色彩空间。因此,这块屏幕不仅精细,而且显示颜色也较以往的 MacBook Pro 要生动、鲜活、准确。再有,这块屏幕的对比度也得到了提升,让屏幕显示的黑色更黑。这样,在显示较暗的画面时,细节相对于前代 Retina MacBook Pro 更加容易看清。

而且,由于 Retina MacBook Pro 的屏幕去掉了一层玻璃,屏幕所显示的内容,不会穿透除屏幕表层玻璃之外的其他玻璃层。因此,屏幕显示的内容,仿佛就像是杂志那样直接印在屏幕上的。同时相对于旧版 MacBook Pro 而言,反光虽然仍然有,不过情况得到了不少的改善。

还有一点,Retina 版 MacBook Pro 的屏幕是基于 IPS 面板,而非旧版 MacBook Pro 的 TN 面板。这样,Retina 版 MacBook Pro 屏幕的可视角度因此得到了很大的改进,像 iPad 的屏幕那样,无论从哪个方向看,都不会偏色。

在使用这台电脑的每时每刻,都会感受到这块卓越、精细的屏幕所带来体验上质的飞跃。进入系统后,系统壁纸的色彩纯正、鲜艳,类似星空、岩石纹理那样的细节清晰可辩。浏览网页时,文字部分清晰锐利,即使像中文宋体、西文衬线体、日文明朝体这类细节较多的字体,在超高分辨率的 Retina 屏幕下显示依旧完美。在浏览类似 The Verge 等网站时,仿佛是在阅读一本印刷精美的杂志。同样,使用 OS X Maverick 新加入的 iBooks 阅读电子书时,再也不会注意到文字边缘难看的虚边了。在用 Adobe Illustrator 做设计时,由于电脑的屏幕本身就是 Retina 屏幕,极为适合为 iPhone 4、iPad 3 这些同样使用 Retina 屏幕的设备做 UI 设计。并且,由于屏幕色域覆盖了整个 sRGB 色彩空间,为 iPhone 5、iPad 3 等采用全 sRGB 色域的屏幕做 UI 设计时,可以确保按钮、图标等 UI 素材在自己的屏幕与在客户的屏幕上显示的色彩是基本一致的。先前的 MacBook Pro 由于采用 TN 面板,以不同俯仰视角观看屏幕会变色,这一点对于设计、图形图像工作者几乎是无法容忍的。而新版的 Retina MacBook Pro 采用了基于 IPS 技术的屏幕,就很好地解决了这个问题。在用 Adobe Illustrator 查看先前的一些矢量作品时,细节清晰得甚至……让人十分感动。播放 1080P 视频时,由于分辨率的提升而使得视频更加清晰,且由于屏幕反光的减少,使得在看一些比较暗的画面时,反光也不会对观看体验造成太大的影响。

距第一代 MacBook Pro with Retina Display 发布已经过去差不多一年半的时间了。在这段时间里,OS X 系统本身以及绝大多数 OS X 应用程序都已经完成了对 Retina 屏幕的适配工作。像我常用的 Adobe Illustrator、Sketch、Blender 等生产力工具都已完美支持 Retina 屏幕。QQ、MplayerX 等装机必备 App 同样都做了 Retina 适配。对于网页来说,很遗憾,只有一部分网站做了 Retina 屏幕适配。其中,Apple 官方网站、知乎、Dribbble、Behance、The Verge 等网站对 Retina 屏幕支持还可以。不过不必过于担心没有为 Retina 屏幕优化的网页显示效果不佳。首先,无论网站是否为 Retina 屏幕做优化,网页的文字部分全部会使用 Retina 高分辨率渲染显示,因此网页的文字部分显示时绝对清晰的。对于网页上的图片来说,未为 Retina 屏幕优化的话,的确显示效果不佳,但也不会比在先前非 Retina 屏幕上显示的效果更差。我甚至认为,之所以感觉图片显示效果不佳,其实是因为网页文字部分显示效果太好了,才会衬托出未经优化的图片显示效果差。而且,通常当图片内容有较为锐利的边缘时,才会给人感受略微不佳;当图片是像人像、风景照片等没有锐利边缘时,即使网页没有为 Retina 屏幕做优化,效果也不会太差。更何况,虽然未经优化的网页图片不能得到高分辨率所带来的优势,但依然能得到全 sRGB 色彩空间覆盖以及低反光、高对比度、广视角等其他优点所带来的好处。因此,总体上讲,不用过于担心浏览没有为 Retina 屏幕优化的网站体验不佳。

如果用 Retina MacBook Pro 半个小时以上,你就绝对不想用其他非 Retina 屏幕的 Mac 或 PC 笔记本了,相信我。


当然,在屏幕得到了极大的改进外,Retina MacBook Pro 的性能也远远强于自己之前的 2010 版 MacBook Pro。对于 CPU 来说,其实通常不会在日常应用中感受得到有多大进步。不过,对于一些专业工作而言,确实能感受到 CPU 变得更加强大了,比如说用 3D 创作软件渲染出图。为测试渲染速度,我简单地用 Blender 做了一个场景:

一个平面上放上一个 Blender 里的猴子头模型,猴子头加了一个细分修改器。场景里用两个不同颜色的面光源及天光来打光。猴子头本身使用主要基于次表面散射(SSS)的复合材质,来模拟皮肤那样材质感觉。由于 Blender 当前的 SSS 着色器不支持使用基于 GPU 的 CUDA 技术渲染,因此使用 CPU 来渲染这个图。设置好场景后,用 Blender 自带的 Cycles 光路追踪渲染器以 1920 x 1080 分辨率渲染出图:

Blender Cycles SSS Render Test

在 Retina MacBook Pro 下渲染出图一共用 7:58,而在旧版 MacBook Pro 下则需要 22 分钟左右。由此可见,CPU 相对于旧版而言确实提升了不少。

不过,对于大多数人而言,CPU 性能的提升越来越无从轻重了。如果一个人日常的工作是处理文字、表格,业余时看看视频、浏览网页的话,其实 CPU 性能对其来说是过剩的。因此对于 Retina MacBook Pro 来说,性能提升的亮点,其实并不在于 CPU 上。

性能提升最大的亮点,是在于 Retina MacBook Pro 使用了 SSD 固态硬盘来替代传统的机械硬盘,作为存储器。并且这一代 Retina MacBook Pro 使用的是基于 PCIe 接口的 SSD,因此速度极快。给我的机器安装 Adobe Illustrator 及 Photoshop 软件,每个软件的安装时间均在一分钟左右,要知道每个的安装包都有一个多 GB。配合 CPU 的提升,打开体积大且较复杂的 AI 矢量图文稿也更快了,几乎均可瞬间打开。虽然 SSD 的容量不高,只有 512 GB,不过足够携带经常使用的文件了。像电影、电视剧视频这些不经常观看而且体积庞大的文件,可以保存在国内的云存储上,或者保存在移动硬盘上。对于 SSD 的寿命,简单来说,请放心,不会比机械硬盘坏得更快。而且,由于 SSD 没有任何机械部件,现在也不用担心电脑未休眠时移动对硬盘有什么伤害了,扣上屏幕后也不必像旧版 MacBook Pro 那样等休眠指示灯变为呼吸闪烁状态后才能移动了。这一改进,给了我很强的安全感,比如在做好一版设计后,希望给 Partner 或上司看,我可以拎起电脑就走,不必担心弄坏硬盘,等等。

性能提升的另一大亮点,在于集成显卡由 Intel HD4000 升级为 Intel Iris Pro 了。上一代的 Retina MacBook Pro 携带的 Intel Iris Pro 集成显卡相对来说性能不佳,对于这一点我自己有体会,因为最开始买 Retina MacBook Pro 时,Apple Store 的店员给我提错货了,给我的是上一代的 Retina MacBook Pro,因此得以体验上代 Retina MacBook Pro 一个晚上。用上代 Retina MacBook Pro 浏览知乎、微博等网站时,由于 Intel HD4000 性能不佳,在用双指滚动手势来滚动网页时,明显能感觉卡顿。而在 2013 Haswell 版 Retina MacBook Pro 上,则几乎就感觉不到有卡顿了。由此可见,集成显示芯片性能提升后,对整体的体验来说是一个巨大的改善。


一直以来,MacBook Pro 最大的缺点之一,就是散热不佳。由于 MacBook Pro 系列的设计一直是尽可能做到轻薄,付出的代价就是内部空间十分紧凑,影响了散热。并且,由于 MacBook Pro 系列采用的是导热更好的铝合金外壳,相对于那些使用塑料外壳的笔记本,也给人一种发热大的感受,因为发热能够立即通过铝合金外壳导出被人感觉到。

买这台 Retina MacBook Pro 之前,也略微担心发热问题,毕竟轻薄很多的 Retina MacBook Pro 更适合放在膝盖上来用,如果发热大的话感觉会很糟。不过,出乎我意料的是,这代的 Retina MacBook Pro 发热情况远不如想像中的要糟。如果不去渲 3D 玩游戏,而仅仅用作上网、听音乐这样的日常使用的话,Retina MacBook Pro 只会至多感觉温一些,不会感觉热,更不会感觉烫手。而旧版的 MacBook Pro 几乎就是一个电暖器,即使仅仅用它来上网。

通常我们的生活和工作环境中是充满背景噪音的,例如空调声、街道及城市本身的低频噪音等等。对于旧版的 MacBook Pro 来说,噪音控制得还不错。日常使用时,MacBook Pro 工作的噪音基本都被环境的背景噪音所掩盖,只有在夜深人静时,才能微微听到风扇的转动声。而新版 Retina MacBook Pro 的噪音控制又得到进一步的改善,运行噪音低得令人吃惊。即使在夜深人静中,也几乎听不到 Retina MacBook Pro 有任何噪音了。仅当把耳朵凑到机身进气口旁边时,才能听见风扇声。平时使用时,她就是那样端坐在桌子上,安安静静地用屏幕显示赏心悦目的内容,实在难免让人爱上她。


同旧版 MacBook Pro 一样,Retina 版依然保留了键盘背光灯及 Multi-touch 触控板。键盘背光灯是夜猫子设计师、作家、程序员群体的好帮手,苹果并没有为轻薄在这一点上做出妥协。而 Multi-touch 触控板依然像以前那样好用,说是世界最佳笔记本触控板应该也不为过。

这一代 15 寸 Retina MacBook Pro 另一个让我感到惊喜的地方,就是内置的扬声器效果极佳。使用之前,认为如此薄的机身里内置的扬声器基本上就是鸡肋,效果肯定不怎么样,就像 13 寸 MacBook Pro 或 MacBook Air 里的扬声器那样。不过实际上效果比旧版的 MacBook Pro 好不少,播放的音乐感觉更加饱满。因此现在在家里想用 Retina MacBook Pro 听音乐时,有时都不想去接耳机了,直接用内置的扬声器播放。

这一代的 Retina MacBook Pro 电池续航也有了一定的改善。即使开几个高耗能程序,续航依然能到五六个小时左右。因此,现在在家里也喜欢把 Retina MacBook Pro 拎到客厅里趟在沙发上上网了。


上一代的 15 寸 Retina MacBook Pro 最大的短板是在于内置集成显卡性能不足,导致日常使用时会出现卡顿。而总体来说,这一代的 15 寸 RMBP 是一个让人几乎找不到任何短板的电脑,可以说是设计师及程序员群体的生产力良器。在著名科技媒体网站 The Verge 上,2013 年版的 15 寸 RMBP 评分是所有笔记本评分中的第二名,9.1 分(冠军是 2013 版 13 寸 MacBook Air,9.3 分)。如果非要给这一代 15 寸 RMBP 挑点什么缺点的话,那么就是电池续航或许还可以再长一些。除此之外,2013 年版 15 寸 Retina MacBook Pro 堪称完美。并且,Apple 下调了全线 RMBP 的价格,非常适合有闲钱且希望更换电脑的设计师、程序员群体购买。

「世界上最好的笔记本电脑,没有之一」,这是知乎上很多人对 2013 版 Retina MacBook Pro 的评价,对此我深表认同。



经过漫长的审核后,我参与制作的一个 App,《豆豆的旅行》于近日,在 App Store 上架了。

《豆豆的旅行》是一个面向儿童和家长的 iPad 科普应用。如果您作为家长,希望让您的孩子了解一些植物知识,特别是花的知识,您可以尝试我们的 App.《豆豆的旅行》通过活泼的画面、可爱的卡通形象来带领小朋友们学习相关的植物知识,如花的结构、花的种类、花的趣闻等等。为了更好让小孩子们学习,《豆豆的旅行》还加入了朗读配音。



《豆豆的旅行》有一款相对应的绘本。绘本里讲述了主人公——豆豆寻找花的主人这个故事。小朋友们和家长既可以单独使用这个 App,也可以配合这个绘本来阅读。


在阅读到相应章节时,可以使用 App 的扫描功能来扫描绘本上的二维码,扫描二维码后就会跳转到 App 的相关知识介绍。



期待您的下载与反馈。对于这个作品有什么意见,可以在文章评论里贴出,也可以在 App 内的「首页」->「About us」->「提个意见吧」页面里直接向我提出。

嗯对了,这是我们学校在 App Store 上线的第一个应用。


我在这个应用程序制作中负责一些杂活,程序开发由神秘人士 X 先生来完成。

一个「新鲜的」App Store 审核被拒绝情况

最近,我的 App 被 App Store 拒绝了。拒绝的原因,可能很多开发者都没有碰到过。

事情是这样的,这个 App 主要是为儿童或家长开发的,因此,在 iTunes Connect 后台,我勾选了 "Made for kids" 选项。结果,App Store 的审核人员告知,如果 App 是为儿童开发的,那么应用不可以在未经家长许可前,打开其他的 iOS 应用,例如打开 Safari 浏览器浏览网页,或使用 URL Scheme 打开其他的 iOS 应用。违反的规定(在最新的 App Store Review Guideline)是:

24.3: Apps primarily intended for use by kids under 13 must get parental permission or use a parental gate before allowing the user to link out of the app or engage in commerce Information Needed.

另外,我的 App 使用了友盟提供的用户反馈组件来收集用户的反馈,但这个功能也需要家长的许可才可以使用:

Specifically, your app enables the user to contact you, but requires no parental permission nor includes a parental gate.

至于如何得到家长的许可,不太知道有什么很好的办法,因为现在小孩子们很聪明的,家长会做的小孩子未必就不会做。而且也没有在 iOS 的开发者参考库里找到相关的家长控制 API 或框架。因此现在计划去掉 Made for kids 选项,重新提交审核。

敬请 App for kids 的开发者周知。

Bēhance 上的我

今天忙了一天,给我在 Bēhance 的帐号上传了近期的一些作品,把 Bēhance 帐号准备好了。我在 Bēhance 的个人页面是:

Bēhance 是 Adobe 旗下的一个网站,主要用途是作为一个在线作品集,供各位设计师使用。比较类似 Dribbble.

现在这个帐号里大部分作品以用 Adobe Illustrator 做的图标、描绘等个人练习习作为主。以后的作品要没有特殊情况,都会放到 Bēhance 上。

欢迎大家来到 Bēhance 上点赞 :)

Blender 初学者设置指南

前些日子,介绍过一款 3D 内容创作软件 Blender. 个人使用了一段时间 Blender,感觉比起 Autodesk 3ds Max 和 Maya 学起来和用起来更加顺手、高效。不过初学 Blender 时,可能会遇到一些困惑。而这些困惑,有很大一部分是由于设置不当所导致的。而我也是初学者,在学习这款软件的时候也遇到过各种各样的问题。所以,就写一篇文章,简单说一下比较关键的一些设置,希望后面的人能少走一些弯路。

如果您不清楚 Blender 是什么,可以先从这篇文章里了解一下,觉得不错的话,可以到 Blender 的官方下载页面下载最新版本的 Blender. Blender 一般每两三个月会发一个新版本,新版本会提供一些令人兴奋的新功能,并且会修正一些错误。下载好后,就开始来设置一下 Blender 吧。

  • 第一步,把软件语言改成中文

在 2011 年 Blender 2.5 版发布后,彻底更新了软件界面,开始支持多国语言文字,并且可以把界面文字按抗锯齿效果显示出来。现在官方的 Blender 同样自带了简体和繁体中文文字界面。不过,默认的语言是英语,需要改一下系统设置才能切换成中文语言。无论您的英语水平是 sorry for my poor English 那种级别的,还是过了专八看小说看文档无所不能,在这里都建议把语言换成中文的。为什么?因为只要英语水平不是母语级别,那么中文就是比英文看着更亲切,能更快被理解。这一点特别适合去初学者去随便探索 Blender 的众多功能,更利于学习。避免出现看到满屏英语,即使都能看懂也没耐心看的情况。所以,建议别嫌用中文界面显得很 low,把软件语言切换为中文。

启动 Blender,从欢迎界面窗口外面随便用鼠标点一下把欢迎界面关掉。然后,点开窗口顶部的 "File" -> "User Preference" 。如图所示:

[ blender 设置入口

然后,在 "Blender User Preference" 窗口中的 "System" 这个选项卡中,把 "International Fonts" 选项勾上,开启国际化字体。接着在 "Languages" 中选择简体中文或繁体中文。最后,把下面 "Translate" 子选项中的 "Interface", "Tooltips", "New Data" 三个选项都点上打开。这样,软件界面的绝大多数命令、选项、提示都变成中文的了。设置如图:

Blender 英文界面


Blender 中文界面

  • 把鼠标选择方式改成地球人通用的

大家从小到大,在各种各样的软件、应用里,要选择某个对象,一般都是点击鼠标左键吧。比如类似在 Finder/资源管理器 中选择文件,或是在 Keynote/PowerPonit 里选择某个文本框或图片,一般都是用左键单击需要选择的文件、对象是吧。不过默认情况下,Blender 偏不是这样。如果在 Blender 的 3D 视口中试图用左键单击选择物体,那么得到的操作结果是——把 3D 光标移到了刚才左键所点击的地方。那要想选择某个物体怎么办呢?是在物体上点击鼠标右键。WTF?!

还好,可以在系统设置里把它改过来,改成使用鼠标左键单击选择物体。在 「输入」选项卡的「选择键」选项中,把默认的右键改成左键就可以了。我自己就是这样做的,改过之后用了两三个月,觉得没遇到过什么不方便的地方。所以推荐所有初学者也这样做。

关于这个问题,Blender 社区内部就有不少争论。有人认为这是传承下来系统化的操作方式中很重要的一环,不能轻易更改。另一些人认为这种操作完全是反人类。对于我来说,更认同著名 Blender 高质量教程网站 BlenderGuru 站长 Andrew Price 的看法,即这是一个用户体验上的败笔。很简单,因为绝大多数其他软件都不是这样做的。几乎所有新用户试图在这里使用在其他软件中习得的经验来操作时,会遇到与预期不一致的操作结果,进而会感到困惑。这样做的后果是让大量潜在的用户流失了。Blender 本来就不是一个主流的 3D 内容创作软件,禁不起这样的潜在用户的流失。再有,不仅右键选择这个操作与大多数操作系统和其他应用软件不一致,同时也破坏了 Blender 自己内部的一致性,因为点击界面选项、按钮、菜单等时用的是左键。这样,即使新用户用了一段时间后,也许仍然会时不时感到困惑和挫败感。

  • 模拟数字键盘(仅限于使用笔记本电脑的用户)

Blender 官方推荐的操作方式是使用一个带数字键的键盘,外加一个三键鼠标(也可以是两键 + 滚轮),操作时一只手一直放在键盘上,另一只手一直握鼠标。不过好多笔记本电脑是没有数字键盘的,而偏偏数字键盘还挺常用的,比如在视图之间的切换,还有平行投影与透视投影切换都要用到数字键盘。好在,可以在 Blender 的设置里修改一下,让用户可以使用主键盘区上方的数字键来代替小键盘区的数字键。

方法是,同样是在 「输入」选项卡中,勾选「模拟数字键盘」,就可以了。

  • 开启持续拖拽

在 Blender 里,经常会需要拖拽鼠标移动。不过会遇到这样一个问题:指针拖拽移动到视口/窗口边上了,不能再继续移动了。对于这个问题,开启持续拖拽后就可以解决。开启持续拖拽后,当指针移动到视口/窗口边缘时,再移动指针,那么指针将会从视口/窗口的对面出现,这样又可以继续移动指针了。这个功能在 3ds Max 里也有提供。


  • 开启自然触控板(OS X 10.7 以上用户)

Blender 也有 Mac 版,并在 Mac 版里对做了一些对 Mac 系统和硬件上的优化。对于 Mac 强大的触控板,Blender 同样也支持得很棒。使用触控板,可以用多点触控手势来操作 Blender,如用双指移动手势来旋转视图,等等。不过默认情况下,手势方向与 OS X系统(10.7 以上)是相反的,而更类似 Snow Leopard 里的操作方式。好在,仍可以在系统设置里改过来。在「输入」选项卡中把「自然触控板」这个选项勾上即可。


Blender 输入推荐设置

  • 更改撤销步数

Blender 默认是能撤销 32 次,不过有时候做东西做到一半,想从中途大改一下,32 次可能有时候不够用,希望能撤销更多次。而 Blender 运行占用的内存相对来说,算比较低的。既然如此,那为什么不多增加一下撤销步数呢?尤其是对于使用 8GB、16GB 大内存的用户来说,空闲空间留着也是浪费,不如全投入有用的地方去。因此,如果内存比较足,建议把撤销步数改得更多一些。

在 「编辑」选项卡中「撤销」->「步数」中,把步数从 32 调到更多一些,即可。

  • 关掉 Python 提示

Blender 大量采用 Python 这个脚本语言来实现从界面到建模等众多功能,并且可以使用 Python 来写脚本、开发插件。默认下将鼠标移动到某个菜单、按钮、选项时弹出的工具提示中,会显示相关的 Python API 提示,类似这样的:

Python 提示

不过这个似乎对很多人没太多用途。如果您不想在工具提示中看到 Python API 信息,可以在「界面」选项卡里,取消掉 「显示 Python 工具提示」这个勾选。(但总觉得默认就应该是不勾上的才对……)

  • 使用 GPU 来加速渲染出图(仅部分显卡可用)

Blender 默认是使用 CPU 来渲染场景。在 Blender 自带的 Cycles 渲染引擎里,可以启用 CUDA 或 OpenCL 技术,来使用 GPU 来渲染。使用 GPU 渲染通常要比使用 CPU 快几倍,因此推荐如果可行的话,使用 GPU 来渲染出图。开启的方法是在「系统」选项卡的「计算设备」选项中,把计算设备由 CPU 改为 CUDA 或其他。

不过,这个特性仅支持部分显卡。首先,需要有个独立显卡。然后,对 nVidia 显卡需要 GTX 2xx 以上,对 ATI 显卡需要支持 OpenCL 1.1 以上版本。还有,使用 OpenCL 技术渲染目前仍为实验特性,仍处于开发阶段,目前并不完善。对于一些着色器,如次表面散射,仍不支持使用 GPU 渲染。在显存不足等情况下,Blender 也会切换到使用更慢的 CPU 来渲染。

(我的 2010 年中版的 MacBook Pro 就不支持使用 GPU 渲染,哭……)

  • 插件

Blender 可以使用很多 Python 写的插件,而初学者可能会很容易忽略掉这些。不过如果能用好插件,可以起到事半功倍的效果。比如若希望给人物模型绑定骨骼,就可以使用自带的 Rigify 插件很轻松生成一套骨骼系统。或者希望支持导入、导出某些格式的文件,同样也可以通过插件解决。做一些复杂但「套路化」的工作,如制作一个窗户,同样也可以用插件来解决。在「插件」选项卡中,即可以发掘一些实用、有趣的插件。








知乎专栏上有一篇文章,相信很多人都看过:我做错什么了 - 潜台词 - 知乎专栏。说的差不多就是类似这种情况。这篇文章获得了数百票赞同。不过,其实当初我看到这篇文章的时候,没太看懂。对照这篇文章,感觉我很多时候,就是这样「讲道理」的人。但后来,就逐渐明白这篇文章讲的道理了。

「我明明是对的啊」,「这件事,明眼人都看得出是 Ta 理亏」。这种心态和行为,大家一定都不少见过吧,甚至自己有的时候都会有。其实类似的行为,同样经常发生在知乎上,通常的表现形式就是「打脸」。即看到一个(自己认为)错误的回答,就在下面评论或另写一个回答,通常上来就是诸如「XXX 说的简直是一派胡言……」的一句话。这种情况,知友应该不少见吧。

结果有可能是,你被长辈冷落了,或一个才能不如你出色的同事被提拔了,你被某个知友拉黑了(而 TA 很可能就是你一个潜在的朋友, 甚至是你潜在的另一半…… ),自己的孩子被摔死了。其中,有的人还会想,明明就是 Ta 不对啊,Ta 的回答就是错误百出啊,我只是多嘴了几句但也没犯法啊,至于吗?

那篇专栏文章(我做错什么了 - 潜台词 - 知乎专栏),说得道理很对,不过可能不太容易明白过来,至少我最初也是没看明白。那么,既然都写到这儿了,前面也铺垫了那么多,就把想说的道理直接写出来吧:


比如,不要直接指出对方的错误,即使你真的是对的。更不要当众指出对方的错误,让对方下不来台。万万不要当众让你领导、上级下不来台。又比如,如果发现某位知友的回答有明显的错误,可以另写一个类似「知友 XXX 先生的回答很详尽、认真,不过对于其中的一些观点,本人不太能认同。……上述回答如有错误,请多指教,欢迎交流。」,这样,既能提出异议,又能保全当事人的面子,维护和平的讨论气氛。再比如,即使有人对你说:「赶紧推着婴儿车滚蛋!」,你这时的最佳策略,就是要默默推着婴儿车到路边,而不是这时候跟他抬杠。忍过去这会儿后你如果实在咽不下这口气,并且你是一个「神通广大」的人,再请黑白道摆平此事,但就是万万不要当场发作。