SwitchingColor Shader

原文:SwitchingColor Shader
翻译:dreamana.com

你有看过这个 Nissan Juke 的网站专题吗?我在偶然在 Away3D showcase 里发现这个 microsite 的。很棒的美术,优雅的程序。自从我玩过许多 shader 之后,我立刻就对这个不可思议的 shader 作品产生兴趣。尤其这个“颜色切换”特效(当你点击汽车有色的区域并选择一个新颜色的时候)引起了我的注意。花了几个钟头的修修补补之后我做了一个 shader 出来,看起来很像。看!就点击方块的任意地方,却换到一个随机颜色。

Have you already seen the Nissan Juke webspecial? I came across this microsite on the Away3D showcase. Great artwork, neat programming. As I was playing a lot with shaders, I was immediately interested in the incredible shaderwork that was done here. Especially the “color switching” effect (when you click on a colored area of the car and select a new color), caught my attention. After some hours of tinkering I came up with a shader, which looks quite the same. Have a look! Just click on the block anywhere, to switch to a random color.

复习 JavaScript

原文:A JavaScript refresh
翻译:dreamana.com

开始之前我们将会涵盖一些 JavaScript 的关键概念。如果你过去几年没有关注 JavaScript 又或者是 JavaScript 新手,我希望这些内容能帮到你。

我们会提及到语言到基础比如变量、函数、作用域以及不同类型,但不会花太多时间在更基础但比如运算符,又或者什么是函数,什么是变量,作为开发者的你应该都知道这些了。我们将通过简单的例子,突出重点,以一个交互开发者的角度,有其他技术比如 Flash(ActionScript3),Java,C#或原生 (C++) 的开发背景,去探讨 JavaScript。

像其他受控语言 (managed language) 一样,JavaScript 运行在一个 JavaScript VM 当中,一个关键的不同点是它不是执行字节码,JavaScript VMs 是基于源代码的,直接翻译源代码为原生代码,通过一个叫 JIT(Just in Time 编译器) 的东西。JIT 在运行时(实时)对代码进行优化工作,取决于不同的架构对平台进行特定对优化。当然,当今大部分浏览器都能运行 JavaScript,下面列出都这些是当前行业界最流行的 JavaScript VMs:

相比起低层语言 (low-level language),JavaScript 提供来一些严谨的便利,比如自动内存分配和垃圾回收机制。虽然这些东西会有速度的开销,但受控语言 提供更多的价值在生产力和平台覆盖方面上。使得现在的开发者们喜欢这些语言多于低层语言,尽管性能有所损失,因为当遇上要发布到多平台上的时候,使用那些低层语言 需花费更高成本。

在我们开始之前,区分出那些浏览器上怎么运作是非常重要的。一方面,我们有核心语言 JavaScript,另一方面,我们有浏览器的 API。历史原因,大多数教程都通常将 JavaScript 和 DOM 合在一块来讲,但他们已经进化成两个强大的独立体。因此我们先谈 JavaScript,之后再深入 DOM 和浏览器 API。这第一篇文章所有提到的只是核心部分,不需要和浏览器 API 打交道,即是纯核心的 JavaScript。 下面列举的是代表着 JavaScript 中通用的核心对象:

  • Array
  • Boolean
  • Date
  • Function
  • Number
  • Object
  • RegExp
  • String
  • Error

要完整的全局对象列表,请查看 Mozilla 的 Global Objects 页。其他对象你可能再 JavaScript 中见过,比如 Window, CanvasRenderingContext2D, XMLHttpRequest 对象,又或者是其他不是 JavaScript 本身去处理的,只是针对特定浏览器的对象,比如网络访问,音频,渲染等等。我们在以后的文章中谈论这些 API。

Swift for AS3 developers 系列

Swift 类型推断

原文:Swift type inference
翻译:dreamana.com

Flash 开发者们经常认为能够声明变量的类型是最喜欢的 ActionScript 特性之一,这使得切换到其他动态语言(比如 JavaSctipt)变得步履艰难。使用了类型,编译器可以很容易地捕获错误,可以优化字节码使得我们的游戏和 Apps 运行得更快;编辑器带代码提示功能的,可以在我们每次敲键盘的时候提供大量关于代码库的信息,而重构时能让我们跳过繁琐又易错的跨多个文件编辑。就像 ActionScript, Apple 的新语言采用几乎一样的语法提供一样的便利:

// ActionScript
var toggle:Boolean = false;
var integer:int = 2;
var ratio:Number = 0.5;
var text:String = "Hello, ActionScript!";
var custom:MyClass = new MyClass();

// Swift
var toggle:Bool = false
var integer:Int = 2
var ratio:Double = 0.5
var text:String = "Hello, Swift!"
var custom:MyClass = MyClass()

不过,Swift 更进了一步。如果我们可以不用每次都声明变量类型,就可以获得严格编译器、额外优化和所有强大编辑器所带来的好处会怎样呢?我正是在说类型推断 (type inference) 特性,Swift 有!其实我们可以简化以上的代码,因为编译器懂得自动检测每一个变量的类型,不需要额外的注释:

// Swift
var toggle = false
var integer = 2
var ratio = 0.5
var text = "Hello, Swift!"
var custom = MyClass()

编译器很聪明,它能明白你声明了一个 Bool 型,一个 Int 型,一个 Double 型,一个 String 型和一个 MyClass 实例,因为那就是等号的另一边的东西。如果你阅读代码,这很明显,Swift 编译器也这么认为。然而,如果代码变得有点复杂时,可能你不能一眼就看出变量的类型是什么。那么就去声明类型吧,提高可读性,用上面第一个例子的语法。也两者中是最好的。

正如你看到的这些例子,Swift 不使用 new 关键字去实例化一个新对象,一行末尾的分号实际不是必需的。加上类型推断,有三个方式使你花更少时间去打字,更快地完成产品。每天都节省了时间,与此同时,你不会失去来自编译器和编辑器的强大的语言智能特性。

July 16, 2014

游戏编程模式

原著:Game Programming Patterns
翻译:dreamana.com

引言

在五年级时,我和我朋友被允许进入一个闲置的放着几台非常破烂的 TRS-80s 的课室。为了启发我们,一位老师找来了份印着一些简单 BASIC 程序的资料给我们捣鼓。

那些计算机上的磁带驱动器是坏的,因此每次我们想运行一些代码,我们不得不仔细地从零开始打。这使我们更偏向于只有几行代码的程序:

10 PRINT "BOBBY IS RADICAL!!!"
20 GOTO 10

也许如果计算机打印足够多次,它就可能魔法般地变为现实了。

即便如此,这个过程是充满了危险的。我们不知道怎样编程,因此就算是一个小小的语法错误我们也是不懂的。如果程序不运作,经常这样的,我们都要从头开始过。

在纸堆的背后是一个真正的怪物:一个占了好几页的密密麻麻的程序。我们仅仅想尝试它都花了很长时间才鼓起勇气,但它是无法抗拒的 ——清单上面的标题是“Tunnels and Trolls(地道与巨怪 ?)”。我们真不知道它用来做什么的,但听起来想是个游戏,还有什么能比你自己编写一个电脑游戏更酷吗?

我们最终都没有让它跑起来,一年之后,我们离开了那课室。(很久以后,当我真正懂了一点 BASIC,我发现它只是一个桌游 (table-top game) 的字符生成器而不是游戏本身。)但木已成舟 ——从那以后,我就想成为一名游戏程序员。

Node.js 杂记

入门案例

The Node Beginner Book
用 NodeJS 打造你的静态文件服务器
从零开始 nodejs 系列文章

Javascript Tips

What’s so great about JavaScript Promises? (译文)
JavaScript.is(Sexy)
A JavaScript refresh
Mastering the Module Pattern

配置相关

编译安装 Node.js

npm 国内镜像 (出处:cnodejs.org)

  1. 通过 config 命令

    npm config set registry http://registry.cnpmjs.org 
    npm info underscore (如果上面配置正确这个命令会有字符串 response)
    
  2. 命令行指定

    npm --registry http://registry.cnpmjs.org info underscore`
    
  3. 编辑 ~/.npmrc 加入下面内容

    registry = http://registry.cnpmjs.org`

Porting again

继续研究 MMD,换用 Flare3D 来渲染。

已实现:模型文件解析,Mesh 生成,骨骼,蒙皮,IK 计算

未完善:动作文件解析,动画

TODO: 表情

查看 上一次的实验

HTML5 入坑须知

HTML5/CSS3 学习快速笔记进行中……

HTML5 文档 | DOCTYPE Declaration

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A Minimum HTML5 Document</title>
</head>
<body>
    Content...
</body>
</html>

文档类型声明非常简单,只需要 <!DOCTYPE html>

语义化标签 | Semantic Elements

大纲结构

section 定义文档或应用程序中的区域(或节)
nav 定义文档的主导航区域
article 用来包裹独立的内容片段
aside 用来表示与页面主内容松散相关的内容
hgroup 用来包裹标题元素

What about Flash?

其实很久以前就想写一篇关于自己对 Flash 的理解的文章,今天有点空,静下心来慢慢总结一下。虽然近来有一些 Flash 的好消息,比如 AGAL2 即将发布,AS3 在 TIOBE 统计表上上升至 20 位;但是总体来说,我觉得 Flash 的前景是非常迷茫。

-过去-

HTML4 的大补丁

首先,我不想再去追溯 Flash 的历史。我认为,Flash 之所以存活多年,最后几乎成为桌面浏览器上各种多媒体插件的“唯一幸存者”,原因是在过去 Flash 补充了 Web

以前的 Web 是蹩脚的,对动画、视频及各种前端交互支持很弱,恰恰 Flash 填补了这片空白,加上 Flash 并不像其他多媒体插件那样单纯的只有音频视频播放,而是一种 RIA 技术(类似有 Java Applet,以及后来微软的 SilverLight,但是他们的市场占有率都不及 FlashPlayer)。FlashPlayer 插件的安装量一直居高,这样一来,Flash 为许多想做创意作品 并发布到互联网上的人提供了平台。

性能低下,完全是 Flash 的错吗?

ActionScript3 的出现无疑是 Flash 的第一次蜕变。AS3 运行在 AVM2 上面,从技术角度说,整体上是会比旧版的 (FlashPlayer 9.0 以前) 快的。而然,随着 FlashPlayer 一次次升级,为什么 Flash 给大家的印象仍然是“吃资源大户”?

Server-side development

Server-side scripting
Node.js - JavaScript
Redtamarin - ActionScript 3

BaaS (Backend as a Service)
Parse
Amazon EC2

RTMFP Service
Cumulus - C++,Lua
ArcusNode - Node.js

Articles
FlashRealtime - tomkrcha - Flash P2P
Peer-assisted networking using RTMFP groups in Flash Player 10.1
The Node Beginner Book

Sources
NetGrouper
AS3MUL

Don't wait for Adobe, believe your force!

http://www.adobe.com/devnet/flashplatform/whitepapers/roadmap.html

#include <iostream>

using namespace std;

int main()
{
    cout << "Hello world!" << endl;
    return 0;
}

Tags