Programming Go under Windows 10 with WSL and vscode has becoming a top choice for me. Reasons being:

1. Vscode is my choice of editor in recent years. Before vscode, it was vim. Now I can even enable Vim within vscode!
2. The eco system of vscode’s Marketplace is very healthy. Extensions are good enough for me to work on lots of topics.
3. With WSL, I can work on Linux within Windows, while coding with vscode, the best combination in my opinion.

So what’s the problem?

I got 2 issues trying to setup the environment described above:

1. How to setup Go cleanly? Do I need gvm? What’s the proper path for $GOPATH?
2. The extension of Go is a must have, but I just can’t install extension while vscode is remotely connected to WSL.

So here I figured out the best steps to steup the environment, and would like to record it here.

Prepare WSL2

Follow the steps to enable WSL 2. My choice of Linux is Ubuntu 18.04.

Notice: I strongly recommend a good terminal to access WSL, and I find Windows Terminal quite good for me to use.

Install Go in WSL

Just follow the official guide to install Go under Linux.

Notice: I need sudo to put files to /usr/local, like this: sudo -C /usr/local -xzf xxx.tar.gz.

I myself follow Go convention, to let $GOPATH points to $HOME/go, and put my source code to $HOME/go/src. And besure to use go module. Make sure you understand everything of the guide: How to Write Go Code. Trust me, it saves a lot of pain.

Coding with Vscode

Here comes the tricky part. I can open vscode under WSL by code .. But I always failed to install the Go extension, which is a must have. In my case (with cable network, not wifi), it has something to do with network’s MTU setting under WSL.

sudo ifconfig eth0 mtu 1400
(You may need to change 1400 to other value in your case.)

Credit goes to this issue report. Once again, a healthy eco system is very important, so there are people answering all kinds of weired question I may encounter.

Conclusion

To this point, you already be able to coding in Golang under WSL with vscode.

I would like to remind a small but important rule: keep it simple. While working on the dev environment, there are lots of guides tell me to install all kinds of plugins/extensions, change this and that settings. Eventually, it almost proves to be unnecessary. Just do what’s really necessary, and leave others until we really have to do it.

That’s it, and enjoy coding in Go!

What’s This All About?

I choose to pick up my OpenGL with the red book. And I find it helps to write notes about what I’ve learned. So I’ll do it here, as blog articles.

Also, I pick Go as the language, as I find it interesting and also mature enough to do OpenGL. I translate examples of the book into Go, and make it public here: https://gitlab.com/michael.wang/opengl_guide_golang. You can see how to setup for golang to do OpenGL in README there.

So here we go. I found chapter 1 quite difficult to read, for it contains a lot of information. Most looks like not useful but are important concept for later topics.

Major Operations of OpenGL Application

1. Data: to construct shapes from primitives (points, lines, triangles).
2. Run shaders on input primitives.
3. Rasterization: convert primitives into fragments.
4. Run fragment shader on fragments.
5. [Optional] Per-fragment operations.

OpenGL Syntax

• API starts with ‘gl’ followed by camel cased words, example: ‘glBindVertexArray’.
• Constant: starts with ‘GL’ followed by underscore separaed, capitalized words, example: ‘GL_COLOR’.
• For same APIs with different parameters, different suffix are used. Example: ‘glUniform2f’ and ‘glUniform3fv’. (See API Suffixes.) 2f means two floating-point values. 3fv means array (vector) of 3 floating-porint values.

API Suffixes

OpenGL Rendering Pipeline

I don’t what these stages means, but trying to memorize them so I got the whole picture and know where I am in later chapters:

Example: triangles

Book source
Go version
You may want to keep OpenGL reference handy: https://www.khronos.org/registry/OpenGL-Refpages/gl4/

The first init() function deal with platform related stuff, no discussion here.

Second init() function is the real OpenGL code. Here looks like we have to prepare something called ‘vertex array objects’, meaning there are multiple objects called ‘vertex array’ (caution: array of ‘array of vertex’). To prepare these data, we encounter first set of OpenGL APIs:

1
2
3
4

void glCreateVertexArrays(GLsizei n, GLuint *arrays);
void glBindVertexArray(GLuint array);
void glDeleteVertexArrays(GLsizei n, const GLuint *arrays);
GLboolean glIsVertexArray(GLuint array);

Notice the sample code mistakenly use glGenVertexArrays instead of intended glCreateVertexArrays, I fixed it in golang version.

After we created the (vertex array) objects, we have to bind it so they can be ‘active’, whatever active means. For now we accept in OpenGL only active objects can be used to draw things.

Another concept to understand, is that vertex array objects do not hold real data that we use to draw things. The data are holded by buffer objects. So to manage the buffers, we need seconds set of APIs:

1
2
3
4

void glCreateBuffers(GLsizei n, GLuint *buffers);
void glBindBuffer(GLenum target, GLuint buffer);
void glDeleteBuffers(GLsizei n, const GLuint *buffers);
GLboolean glIsBuffer(GLuint buffer);

Here again, buffer has to be binded (so became ‘active’) before we can using it to draw things.

To actually load the data (from main memory to video memory, I suppose), we use:

1

void glNamedBufferStorage(GLuint buffer, GLsizeiptr size, const void *data, GLbitfield flags);

Notice the sample code use glBufferStorage instead of glNamedBufferStorage, I fixed it in golang version.

The value of the data is worth noticing. They are all in range [-1, 1], it’s called normalized-device coordinates. More on this in later chapters.

The Shader Program

Then we (as newbie to computer graphics) entering the territory of this ‘shader’ thing. These shaders are used to actually do the drawing (with the data we prepared above). There are many type of shaders, here we use two of them: vertex and fragment shaders.

To use a shader, we need to compile and link it, just like other computer programs. The procedule is quite simple:

1
2
3
4
5
6

GLuint glCreateProgram(void);
void glShaderSource(GLuint shader, GLsizei count, const GLchar **string, const GLint *length);
void glCompileShader(GLuint shader);
void glAttachShader(GLuint program, GLuint shader);
void glLinkProgram(GLuint program);
void glUseProgram(GLuint program);

At first we create a program (something video hardware can execute I suppose). Then we compile the (shader) source code, attach it to the program. When all source codes are ready, we link them. We ‘use’ the program with last API above, which again, make the program ‘active’ (ready to be used).

Now the harder part of the shader thing, the source code of first shader:

1
2
3
4
5
6
7
8
9

#version 450 core

layout (location = 0) in vec4 vPosition;

void
main()
{
	gl_Position = vPosition;
}

Let’s try to guess what’s going on here. First it choose a version (450). Then it looks like declare a variable named vPosition of type vec4, which I guess is vector of four elements. In the main function, we set value of vPosition to a variable called gl_Position.

Notice the point data we passed in only contains 2 coordinates:

1
2
3
4
5
6

vertices := []float32{
	-0.90, -0.90, 0.85, -0.90, -0.90, 0.85, // Triangle 1
	0.90, -0.85, 0.90, 0.90, -0.85, 0.90, // Triangle 2
}
...
gl.NamedBufferStorage(Buffers[ArrayBuffer], 4*len(vertices), gl.Ptr(vertices), 0)

But in vertex shader source code, we declare vPosition as vec4, which supposed to have 4 coordinates. According to the book, OpenGL ‘automatically’ fill in any missing value with default value (0.0, 0.0, 0.0, 1.0). Yeah, 4 values (instead of 3 of x, y, z in 3D coordinates).Let’s figure out that later, though I guess that has something to do with matrix operation.

The layout (location = 0) means to use 0th shader attribute location. You can see we set this value (0) in first parameter of VertexAttribPointer:

1
2

gl.VertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, nil)
gl.EnableVertexAttribArray(vPosition)

Last thing to notice about the vertex shader source code, is the gl_Position variable. It’s defined by OpenGL (all begin with gl_ prefix). And all we do is copy vPosition to it.

Next let’s turn on to fragment shader source code:

1
2
3
4
5
6
7
8

#version 450 core

layout (location = 0) out vec4 fColor;

void main()
{
	fColor = vec4(0.5, 0.4, 0.8, 1.0);
}

The book says no much about this shader code. We can guess the fColor declaration of a variable about color, and it’s meant to be output to someone within OpenGL.

One should pay attention to glVertexAttribPointer, as it’s the only real work we do in the sample code: to specify triangle’s coordinates. (the color of triangles is fixed in shader source code.) It’s designed to be flexible (to be able to handle data with all kinds of memory structure) so the 6 parameters.

Finally the call to EnableVertexAttribArray, looks like we can specify multiple vertex attribute arrays, and enable one of them.

Notice the vertex attrib array we are dealing with, are part of the vertex array object we create and bind in early part of the second init function. So call to glVertexAttribPointer imply we already bind one vertex array object. To modify state of un-binded vertex array object, we have to use another set of APIs: glEnableVertexArrayAttrib, glVertexArrayAttribFormat, glVertexArrayVertexBuffers.

Now everything all set, we can do the drawing:

1
2
3
4
5
6
7

func display() {
	black := []float32{0.0, 0.0, 0.0, 0.0}
	gl.ClearBufferfv(gl.COLOR, 0, &black[0])

	gl.BindVertexArray(VAOs[Triangles])
	gl.DrawArrays(gl.TRIANGLES, 0, NumVertices)
}

We clear screen to black, bind the triangles vertex array object (make it active), ask OpenGL to draw it.

The clear screen actually means to set ‘color buffer’ of current ‘framebuffer’ to specific value. Framebuffer is a chunk of (video) memory consumed by video hardware to generate the pixels we see on screen. Within it, there are color buffer, depth buffer, and stencil buffer. More detail on later chapters.

Last call DrawArrays to draw our data as triangles. We can pass different value as first argument. I find it quite familiar with GL_LINE_LOOP, as it looks like early day games I played when I was a child. Try it yourself!

vex_data=>operation: Vertex Data vex_shader=>operation: Vertex Shader:>https://www.khronos.org/opengl/wiki/Vertex_Shader[blank] tess_control=>operation: Tessellation Control Shader:>https://www.khronos.org/opengl/wiki/Tessellation_Control_Shader[blank] tess_eval=>operation: Tessellation Evaluation Shader:>https://www.khronos.org/opengl/wiki/Tessellation_Evaluation_Shader[blank] geo_shader=>operation: Geometry Shader:>https://www.khronos.org/opengl/wiki/Geometry_Shader[blank] prim_setup=>operation: Primitive Assembly:>https://www.khronos.org/opengl/wiki/Primitive_Assembly[blank] cull_clip=>operation: Culling and Clipping rast=>operation: Rasterization:>https://www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview#Rasterization[blank] frag_shader=>operation: Fragment Shader:>https://www.khronos.org/opengl/wiki/Fragment_Shader[blank] vex_data(right)->vex_shader->tess_control(right)->tess_eval(right)->geo_shader->prim_setup(right)->cull_clip(right)->rast->frag_shader{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}

什麼是 Assets

Assets 包含：

- 圖片
- CSS
- JavaScript
- 等等

處理 assets 的套件是 sprockets-rails。Asset 檔案需存放於 app/assets 目錄底下的各個子目錄，例如 images, stylesheets, javascripts。

主要功能

Asset pipeline 有三大主要功能：

1. 前置處理（precomipile）
2. 串接檔案（concatenate）
3. 壓縮檔案（minification or compression）

前置處理：讓開發者可以用更高階的語言撰寫這些 assets，然後利用工具把高階語言轉換成目標語言。例如 SASS -> CSS，CoffeeScript -> JavaScript。

串接檔案：網頁常包含了為數不少的 assets 檔案，而瀏覽器同一時間能抓的檔案通常有上限，因此減少 asset 檔案數量有助於加速網頁完成下載，一個方法就是把不同的 asset 檔案串在一起，減少總共需要下載的檔案數量。

壓縮檔案：CSS 內容包含了為數不少的空白與註解，asset pipeline 利用工具把這些不影響網頁結果的內容拿掉，減少檔案長度，進而達到加速網頁下載的目的。（JavaScript 有更複雜的壓縮方法。）

Fingerprint: Assets 檔案的指紋

如果觀察網頁的原始碼，會發現 asset 檔案的連結中，包含了一常串英數字：
“/assets/application-0aba43abddedd090020adc6f7ce1ae456a2ba89928cd0d6ff94b50c8b89a9e85.css”

這些英數字是該檔案（/assets/application.css）的指紋，目的是讓 server 到瀏覽器之間，一路上所有提供快取的系統，知道何時應該把快取的檔案更換成新版的。這邊 Rails 採用的策略是利用 MD5 演算法根據檔案內容產生 128 位數的十六進位數字，把這長串數字附加到檔案名稱。其產生的結果，是當檔案內容有任何更動時，檔案的名稱就會不同，一路上提供快取的系統則知道該下載新的檔案。

宣告檔（manifest file）與指示（directive）

宣告檔跟其中內含的指示告訴 asset pipeline 我想要使用哪些檔案，你可以把它想成 C/C++ 中的 #include。宣告檔長得像這樣子：

1
2
3
4

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

以 //= 開頭的那幾行就是指示。這四行指示中，前三個明確要求要使用（包含）三個檔案（jquery.js, jquery_ujs.js, turbolinks.js），其中副檔名（.js）可以省略，asset pipeline 會從它的 search paths 中去尋找這些檔案。

另一個指示：require_tree 會以遞迴的方式把所指定的目錄（這邊的 . 指的是 application.js 所在的目錄），裡面所有的檔案全都包含進來，順序沒有保證（而順序會影響最終包裝的單一檔案，詳見後面章節）。

Rails 4 在產生新專案時，會幫我們產生兩個宣告檔，一個是上面的 assets/javascripts/application.js，另一個是：

1
2

*= require_tree .
*= require_self

這邊可以看到 CSS 檔案的指示是以 *= 作為開頭，它一樣要求把目前所在目錄底下所有的 .css 檔案都涵括進來。這邊特別使用 require_self，雖然 application.css 已經在 require_tree . 當中被包含進來了，然而用 require_self 再一次包含這個檔案，其結果是定義在 application.css 內的 CSS 會覆蓋掉之前所有檔案定義的。

最後，宣告檔不限於 Rails 幫我們產生的這兩個，例如我們可以定義 asset/javascripts/admin.js 跟 asset/stylesheets/admin.css，裡頭只包含跟管理相關需要的檔案，作為模組化的方法，此時在 view 中可以這樣使用這兩個宣告檔：

1
2

<%= stylesheet_link_tag "admin", media: "all" %>
<%= javascript_include_tag "admin" %>

讀到這邊解答了我的一個疑惑，為什麼 asset/javascripts 裡頭有分不同 controllers 的 .coffee（最後會變成 .js），但為甚麼我在別的 controller 的 view 能使用其它 controller 的 .js 裡面定義的東西？答案在 Rails 一開始自動幫我們產生的：

1
2

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

可以看到 application.js 以及 application.css 這兩個宣告檔被加入每一個 .html，而這兩個宣告檔分別把自己所在目錄內的所有 .js 以及 .css 包含進去了，結果就是無論哪一個 controller 對應的 .js .css 都可以在所有的 views 被使用。

前置處理（Preprocessing）

在 asset 裡面的檔案，在送去給 client 之前，可以經過前置處理，要這麼做的原因通常是開發人員需要，舉個例子，CSS 中常需要指定 background-image，該影像檔案存放在 assets/images 底下，由於檔案指紋一節所提的原因，最終的檔案名稱其實很長，於是我們需要借用 helper function 幫我們產生該影像的路徑，可是 CSS 裡面不能使用 Ruby 程式語言，此時就需要 asset pipeline 的前置處理，方法是把該 CSS 檔名從 some.css 變成 some.css.erb，然後就可以在裡面叫用 Rails helper

1
2
3

a {
  background-image: image-url("image.png");
}

當這個 some.css.erb 需要被用到時，asset pipeline 會先把它當成 embedded ruby 檔案來處理，於是把 image-url("image.png") 替換成該影像最終的路徑（很長包含指紋的那個），拿掉 .erb 副檔名，然後發現副檔名變成 .css，即是 client 要求的檔案。

這邊要注意前置處理的順序，是按照副檔名從右到左依序處理，例如 some.css.coffee.erb 會先當成 erb 檔處理過，再交給 CoffeeScript 處理，反過來就不行，因為 CoffeeScript 看不懂嵌入的 Ruby 程式碼。

設定

開發模式下 assets 不會被串接起來，而是一個一個傳送給 client。會有這個行為是因為以下設定：

1

config.assets.debug = true

(換句話說，在開發模式下把 config.assets.debug = false，就可以產生如 production 模式那樣的串接 assets 結果）。

另外，Rails 會對 assets 檔名附加指紋的行為，是透過以下設定控制：

1

config.assets.digest = true

正常情況下 config.assets.digest 是不應該關閉的，否則 client 會無法得知何時應該更新 assets。

待續…

When using bootstrap, a common layout problem is to center align columns. This problem can be divided into two problems: even colomns and odd columns.

Solution for 2 columns (can extend to even columns):

1
2
3
4
5
6
7
8
9
10
11
12

<div class="row">
  <div class="col-md-3">
  </div>
  <div class="col-md-3">
    <!-- content -->
  </div>
  <div class="col-md-3">
    <!-- content -->
  </div>
  <div class="col-md-3">
  </div>
</div>

Solution for 3 columns (can extend to odd columns):

1
2
3
4
5
6
7
8
9
10
11

<div class="row text-center">
  <div class="col-md-3">
    <!-- content -->
  </div>
  <div class="col-md-3">
    <!-- content -->
  </div>
  <div class="col-md-3">
    <!-- content -->
  </div>
</div>

1
2
3
4

.row.text-center > div {
  display: inline-block;
  float: none;
}

你剛下載了一份 Ruby on Rails project 的原始碼，發現它用的是 postgresql database 而無法執行？我在這裡記錄下設定的步驟。

前提

開發環境：Mac
已經安裝 homebrew
已經安裝 Ruby & Rails

安裝 postgresql

1

brew install postgresql

完成後可以到

1
2

## 設定資料庫

initdb /usr/local/var/postgres

1
2
3
4
5

安裝完成後執行一次即可。後面的路徑是你想把資料庫放在哪裡，不一定要那個路徑，只是大部分文件建議放那裡。

## 啟動 postgresql
你可以設定每次登入 OSX 都啟動 postgresql：

ln -sfv /usr/local/opt/postgresql/*plist ~/Library/LaunchAgents

1
2

然後現在就把 postgresql 啟動：

launchctl load ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist

1
2
3

## 幫你的 app 設定資料庫
在你的 Rails project 找到資料庫設定檔：```config/database.yml```，本文的前提是在 Mac 下開發，所以找到開發環境的設定：

development:
database: myapp_development
username: myapp

1
2
3
4
5
6
7
8

請將 'myapp' 替換成你看到的名稱。

這一段是在說明：
    1. 開發環境下要有名為 myapp_development 的資料庫。
    2. 要使用名為 'myapp' 的使用者操作這個資料庫。

## 建立使用者

createuser myapp

1
2
3

創造一個名為 myapp 的使用者，不用輸入 password 就可以操作 database。

## 建立 database

createdb -Omyapp myapp_development

1
2
3
4
5

建立一個名為 myapp_development 的資料庫，透過名為 myapp 的使用者操作。（注意 "-Omyapp" 是英文字母 O for Owner 而非數字零。）

## 執行 Rails Project
一切就緒後，按照一般 Rails project 的步驟啟動：

bundle install –without production
rake db:migrate
rails server
`

如果一切順利，你應該可以在這裡看到你的網站。

Stuff I learned about Meteor.

The ‘id’ attribute in stars-rating package

When using stars-rating to image thumbnail, the code looks like this:

1
2
3
4
5
6
7
8
9
10

<template>
  {{#each images}}
  <div class="thumbnail">
    <img ... />
    <div class="caption">
      {{>starsRating class="image-rating" id=_id}}
    </div>
  </div>
  {{/each}}
</template>

The “id” attribute in starsRating template is often used to change model when rating is changed:

1
2
3

'click .image-rating': function() {
  Images.update({_id : this.id}, {$set: ...});
}

The problem is: when some thumbnails are hidding (by deleting image for example), some of other thumbnail’s starsRating template is not showing. Inspector shows the HTML tags are there, but those stars are not showing.

I still don’t known the real cause of this issue, but I do known how to prevent it: by rename “id” attribute in starsRating template to something else:

1

{{>starsRating class="image-rating" image-id=_id}}

and js code would become:

1

Images.update({_id : this.image-id}, {$set: ...});

I’ll update when I learn more about this issue.

1. 常保工作環境整潔：固定期間清掃桌面，工作器具（電腦等），勿使萌生灰塵。
2. 不使用提神飲料：大腦是我們最重要的資產，所有提神飲料都會傷害它。
3. 不熬夜工作：正常睡眠是身體健康的最重要指標，也是白天工作安排正確與否的重要指標。你應該在不影響正常睡眠下完成工作。

（本文假設你使用 Mac，其它平台細節稍有出入，但我所要討論問題本質各平台都一樣）

一個簡單的 Java gradle build file:

1
2
3
4
5
6
7
8
9

apply plugin 'java'

repositories {
    mavenCentral()
}

dependencies {
    compile 'org.apache.commons:commons-lang3:3.4'
}

把專案 build 出來：gradle build，然後執行：java -classpath build/libs/java.jar foo.Main

其中 foo.Main 是 main function 所在的 class path。一跑起來我遇到了錯誤：

1
2
3
4

Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/lang3/builder/ToStringBuilder
...
Caused by: java.lang.ClassNotFoundException: org.apache.commons.lang3.builder.ToStringBuilder
...

由訊息可以判斷 JVM 找不到 ToStringBuilder 這個 class，它應該以 .jar 的形式存在電腦上的某個位置，但是我們沒有告訴 JVM 應該去哪裏找這個 .jar。

其實 gradle 有幫我們把這個 .jar 下載（位置在 ~/.gradle/caches/ 裡面搜尋 commons-lang3-3.4.jar 就有），否則沒這個檔案連 compile 都會出問題。但是 gradle 只負責幫我們 build，它不管執行時期 JVM 要去哪裡找這個 .jar。

因此最直接的解法，是找到這個檔案，把路徑告訴 JVM：

1

java -classpath build/libs/java.jar:~/.gradle/caches/modules-2/files-2.1/org.apache.commons/commons-lang3/3.4/5fe28b9518e58819180a43a850fbc0dd24b7c050/commons-lang3-3.4.jar foo.Main

你可以看到，路徑很長很麻煩，如果有好幾個 dependency libraries，光打這行命令就又臭又長，不漂亮。所以第一步，把這些 .jar 都蒐集到同一個地方，讓路徑短一些，這件事可以請 gradle 幫我們做：

1
2
3
4
5
6

...
task copyToLib(type: Copy) {
    into "$buildDir/libs"
    from configurations.runtime
}
build.dependsOn copyToLib

簡單說，我們請 gradle 在進行 build 這項工作的時候，幫個忙，把 dependency libraries 都複製一份，到 $buildDir/libs，然後我們就可以這樣執行程式：

1

java -classpath build/libs/* foo.Main

因為所有 jar 都被複製一份到 build/libs 目錄裡面去了。這樣簡潔多了，不過複製一堆 .jar 我感覺還不夠漂亮，另一個方法是乾脆把所有 .jar 都綁進去我們的 java.jar 裡面，再次修改 build file：

1
2
3
4

...
jar {
    from { configurations.compile.collect { it.isDirectory() ? it : zipTree(it) } }
}

如此一來，就可以回到一開始的方法執行：java -classpath build/libs/java.jar foo.Main。當然這樣做出來的 java.jar 會比較胖，你可以搜尋 “fat jar” 找到相關的資訊。

PS: 想學好 gradle 的朋友有個不錯的 gradle tutorial。

最近看到一篇關於 Journey 遊戲作者 Jenova Chen 的訪問，讀來頗有感觸，隨手翻譯成中文。原文出處：http://mashable.com/2014/04/17/jenova-chen-emotion-in-games/#:eyJzIjoidCIsImkiOiJfdmJ4YzM3dzRjdDV6cmxnZCJ9

文章裡有些關於 Game for Change Festival 會議的詳細時間地點，我就不翻出來了，不過這個會議 Jenova Chen 會去演講，應該值得事後找來聽。

以下為文章的翻譯：

探索遊戲中的喜怒哀樂

Jenova Chen 表示『電玩一直都是我生活中的一部份。我跟朋友一起玩電動，直到有一天我們變大人，然後朋友們就停止玩遊戲了。』

Janova 是 thatgamecompany 的創辦人，他思索者上述的現象。雖然朋友們說實在因為太忙了，但其實他們還是有時間做其它形式的娛樂。

Jenova 說：『人們還是會讀小說，看電影，聽音樂。但他們不再玩遊戲，這讓我感到失落。我要怎麼做才能讓電玩不再只是給小孩子玩的，而是能讓各個年齡層，無論男女都能接受？我的夢想是打造人人都愛玩的遊戲！』

當 Jenova 還在南加州大學互動媒體校區就讀的時候，就開始思考如何解決這個問題。他覺得由於軟體開發的關係，遊戲都使用開發技術作為分類的依據，像是大規模多人線上遊戲（MMOG）或是第一人稱射擊（FPS）。相較之下，娛樂產業則是使用『情感』作為分類的依據，像是浪漫愛情片，動作片，恐怖片，劇情片 (drama)等等。Jenova 注意到電玩裏的情感種類不多，而且通常圍繞著年輕男性的喜好為主。

『試著找一下女生喜歡的情感類型：浪漫愛情喜劇類的遊戲？不存在。紀錄片類型的遊戲也許有幾個例子，但是有看過真正戲劇類 drama) 的遊戲嗎？並不存在。』因此 Jenova 認為：『想讓遊戲能被成熟的玩家接受，需要有更多種類的情感在裡面，才能讓遊戲像是電影一樣被他們所接受。』

而他的目標不只是讓遊戲能被人們接受而已，Jenova 想要做出極富情感張力的遊戲，甚至能讓玩過的人們能有更好的生活品質。他的公司 thatgamecompany 已經在幾款遊戲中取得成功，像是 FlOw，Flower，Cloud，以及 Journey，這些遊戲都具備了高度互動以及讓玩家投入感情，這種非傳統的遊戲體驗。

特別是 Journey 這款遊戲，讓玩家有著很強的情緒上的反應。Journey 是在 2012 年於 PlayStation 3 上面發表，是關於一個披著斗篷的身影一路到高山頂端的旅行，途中經過沙漠，宮殿，洞窟與危險的雪地。雖然這段旅程可能只有短短的兩三個小時，但不同於許多遊戲讓玩家花許多時間重複類似的東西，Journey 專注於讓玩家在這短短的旅途中，充滿有許多驚奇的體驗。

Jenova Chen 表示，在發表了 Journey 之後，他們收到來自世界各地的玩家，非常感性的回饋，像是一位退伍軍人，因為戰爭受傷而殘廢，而他說這款遊戲帶給他希望，讓他燃起重新好好過生活的鬥志。還有些玩家透過這款遊戲，撫平悲傷以及釋放失去愛人的痛苦。

在玩 Journey 時，玩家會遇到其他同在線上的玩家，披戴著一模一樣的斗篷與帽子，而玩家們可以一路互相扶持幫忙，也可以透過有限的方式溝通，但他們永遠不會知道對方的真實身份，Jenova 說有幾位失去摯愛的玩家，感覺到失去的愛人，回來陪他們玩 Journey，這樣的體驗，讓這些玩家得到了感情上的釋放。

『如果不是收到六七位來自世界各地的玩家，都描述著同樣類似故事，我們本來也不相信這遊戲可以達到這樣的效果。』

『我們的遊戲已經不只是單純的娛樂，或是短暫的解脫，透過適當的設計，遊戲裡頭俱有更深層的力量，我認為透過某些感受可以有撫慰心靈的效果，甚至讓人們覺得活得更棒。』Jenova 說：『現在我的夢想更上一層樓，我們想要讓世界各地的人們心靈能得到正向的能量，即使你認為遊戲只不過是一種娛樂。』

要達到完美的遊戲體驗，以及確保玩家能有最佳的情感體驗，Jenova 的團隊倚賴測試時玩家提供的意見。Journey 花了三年開發，團隊不斷變更遊戲的設計，以確保每個玩家都能有最棒的體驗。

多人連線是其中一個主要的問題，因為玩家之間結伴旅行是遊戲的一大特色，因此開發團隊必須確保玩家的行為都能成為好的伴侶。

『有一段時間，這些測試玩家們對彼此都很殘酷，就像其它許多類型的線上遊戲玩家一樣，當 Call of Duty 的玩家來到 Journey，我本來預期可以誘導他展現人性的光明面，但結果並沒有發生…』

遊戲中有限的玩家互動，像是推擠或是碰撞，本來是要讓玩家可以用來互相幫忙，像是爬到對方的身上，然後爬上本來爬不過去的高牆。結果在測試玩家身上看到的，是用那些互動能力來剷除對方，像是把別的玩家推到坑裡面跌死。整個遊戲變質為玩家在懸崖邊互相試圖殺死對方。

Jenova 說：『有一度我對於測試玩家們感到非常失望，但後來我發現其實遊戲的開發人員也想做同樣的事情。其實並不是這些人很邪惡，而是遊戲的設計，導致系統鼓勵這些惡行。』

『這些玩家到了一個新的世界，其實就像小寶寶一樣，是一張白紙，試圖探索這個世界。一位兒童心理學家曾經跟我解釋，小嬰兒拿湯匙敲打桌子時，他並不知道在做什麼，他想看看這樣做結果會怎樣。如果小寶寶這樣做把他媽媽吸引過來，結果這正是他想要的結果，因此他會拿著湯匙更用力敲桌子。』Jenova 後來明白了：『把玩家推下懸崖可以摔死人，正是玩家想要的結果。至此，我們知道這遊戲需要重新設計了。』

Jenova Chen 會在四月24日舉行的 Games for Change Festival 上演講，題目是『一張空白的畫布：遊戲設計的新時代，用感情來說故事』。