近日在海外社交新聞站點Reddit上對青瓷引擎展開了激烈的討論，起因是海外一個專門介紹各類游戲引擎的網站GameFromScratch發表了一篇名為《走進青瓷引擎》的新手教程和評測。今天將帶大家一起來看看這篇文章。（文章為全英文，為了方便大家閱讀，對每段大意做了簡單翻譯。若有任何疑問歡迎交流。）
Welcome to another episode in the “Closer Look at” game engine series. The closer look series is a combination of getting started tutorial and review to help you determine if a game engine is the right fit for you. Today we are looking at the QICI Engine and HTML5 game engine built over top of the Phaser framework which itself uses the Pixi graphics renderer. Normally when I work with a game engine, I have to spend several weeks with it before I can put together one of these guides. With QICI, it took substantially less time, only a couple days, to come to terms with the engine. This isn’t a slight on QICI in the slightest. First, I am a big fan of the Phaser engine it is built on, so this gave me an immediate familiarity. Second, it is just an extremely good, well designed, capable and well documented game engine. Hmmm, bit of a spoiler there I suppose, but I really like the QICI engine. Read on to find out why.
歡迎來到新的一期“走近” 系列，該系列是通過結合的新手教程和評論來幫助你選擇最適合的游戲引擎。今天，我們將走進青瓷引擎，一款將使用了PIXI圖形渲染的Phaser作為底層框架的HTML5游戲引擎。一般情況下，我在使用一款引擎之前都要花上數周來熟悉各種手冊。但是，這次對於青瓷引擎，我僅用了幾天便可上手了，這簡直太棒了！我是Phaser的鐵桿粉絲，因此青瓷引擎給我一種特別的親近感。另外，無論是界面設計、使用性能以及用戶手冊方面都非常貼心。這款引擎實在是我的大愛，接下來請隨我一起走近這款引擎。
As always, there is an HD video version of this guide available here. （注：該視頻需要翻牆觀看，牆內的同學可點擊這里）
按照慣例，此處有視頻介紹。
A Tour of the QICI Engine
The engine is available for download here. It is bundled as a zip archive while available on Github (the code is not directly on Github however, but is included within the archive). Simply extract the archive contents then run start-win.bat or start-mac.command depending on platform. The engine is built around NodeJS and Node must be installed before using the QICI engine. The code is released under the MIT license, making QICI both free as in beer and free as in freedom. There are future hooks for paid plugins, but currently all plugins are available for free as well.
這款引擎的下載地址在這，她在Github上提供了壓縮文檔，簡單解壓后你可以根據你的操作系統運行 start-win.bat 或 start-mac.command。使用該引擎之前需要下載並安裝NodeJS（點擊下載）。青瓷引擎是完全免費且開源的，並遵從MIT協議。將來會提供一些付費插件，不過目前所有的插件都是免費的。
Once you run QICI, it loads a browser window and a fairly humble project management screen:
當你運行青瓷引擎時，她會打開一個瀏覽器界面，並呈現出一個簡潔的菜單，如下：
Here you load existing or create new projects. Creating a project is simply a matter of selecting an empty directory and clicking Create.
這個界面下你可以打開以往的工程或創建一個新的工程。選擇一個空白目錄，並點擊“創建”，即可創建一個新工程。
Once you’ve loaded or created a project, you will be brought to the primary editing window:
如果你以前加載或創建過新工程，你將進入到一個編輯主界面：
The editor is pretty typical of modern component based game engines. You’ve got an editing surface for composing screen elements, a hierarchy view containing your current scenes contents, a project view for managing the assets in your project and finally an inspector view that updates dynamically based upon the current selection. For a web based editor, the UI is silky smooth and doesn’t feel clunky. For example, right click context menu support is prevalent and intuitive:
編輯器采用了當下經典並非常流行的通用組件，包括當前場景內容的層次樹面板、管理當前項目工程的所有資源的工程項目面板，以及可動態監測激活目標屬性的屬性監視面板。作為一個基於Web的編輯器，其UI設計非常自然、舒適。比如右鍵菜單內容就很直觀便捷。
The editor supports common features like drag and drop, tool tips, resizes well in the browser and frankly doesn’t feel like a web app most of the time. I encountered the occasional glitch where the cursor got stuck in the wrong mode, but they were uncommon and easily avoided. Frankly, if you weren’t in a web browser, you would have no idea this was a web application.
編輯器支持通用功能，如拖拽、工具提示、瀏覽器適應等，我曾發生過一次鼠標困頓的問題，不過類似問題發生概率較低，也很容易避免。說實話，如果不是在瀏覽器中使用的話，你很難相信這是一款基於web的應用。
You can also change the layout to work in Portrait mode, like so:
你可以選擇縱向的布局模式，如下：
The UI can be switch between English and Chinese via the Language menu. You can also configure the editing window to mirror common iOS device dimensions:
引擎支持中英文兩種語言，可直接在語言選項中選取。同時編輯窗口可設置為iOS主流設備分辨率。
Oddly, no Android love. Not really a big deal, as this just sets the dimensions and a Free Aspect option exists
如果是Android系統下請選擇與選項中相近的分辨率，或者使用"Free Aspect"選項。
Creating Scenes
創建場景
Your game project is composed of one or more scenes. We can add, reload and save scenes via the project menu.
可以在工程菜單中選擇新增、加載或保存場景。
The following settings are configurable on the project by project basis:
在項目基礎上，可配置下列設置
Once saved, a Scene appears under states in your assets view:
保存以后，場景會出現在資源視圖狀態下的state文件下：
Scenes are composed of the following elements
場景中包含以下元素：
To create a new game object, simply select it from the list and position it on screen. Here for example is a sprite:
創建一個新的游戲對象，只需從列表選中即可。以下是創建一個精靈的例子：
There are widgets for placement, free or axis confined, scaling and free scaling, but oddly enough, not rotation. To perform rotation, you need to use the Inspector window:
工具欄中包含了移動場景、移動對象、縮放變形等。（筆者注：拖拽小紅點可以旋轉）
As you can see, the Inspector has editors for the various components that go into our game object. In this case, a Sprite contains a Transform and Sprite component. You can add additional components via the Add Component button:
如圖所示，屬性監視面板包含了針對游戲對象的各種元素的編輯器。在這個例子中，精靈包含了變形和精靈組件。你可以通過添加組件按鈕增加其他組件。
Somewhat confusingly, you can also add components in another manner, as we will see shortly when we attach a script. You can add additional functionality via Plugin, like so:
你還可以通過其他方式增加組件。你可以通過插件增加新的功能，比如：
Let’s add an Arcade Physics controller to our game, and make our sprite a physics object. Select Plugins->Plugin Manager, then in Inspector enable Arcade Physics. Next click Save and Reload:
我們來給游戲添加一個物理組件，賦予精靈物理對象的特性。選擇“插件”—>“插件管理”，在屬性監視面板中勾選物理組件，然后點擊保存並加載。
Now if we click Add Components in the Inspector with our sprite selected, we get:
如果我們點擊添加組件按鈕，我們將看到：
Select Plugins->Arcade->RigidBody. You will see in Inspector, we now have an additional component to configure.
選擇Plugins->Arcade->RigidBody，你將在屬性面板中看到剛添加的插件，現在就可以配置新的組件了。
Set the Gravity Y value to 10, and hit the play icon and you should see:
將Y軸引力值設成10，點擊播發按鈕，效果如下：
As you can see, you can preview the running of the scene directly in the editor.
如圖所示，你可以直接在編輯器中預覽運行效果。
As you may have noticed from the game objects available, QICI has robust UI support. You can easily use hierarchies of components to form complex UIs, like so:
你可能已經從可用的游戲對象中注意到了，青瓷引擎有着強大的UI支持。你可以輕松地通過對象樹來實現復雜的UI界面，比如：
An impressive number of layout properties are exposed to the inspector:
屬性監視面板中展示的圖層的各種屬性：
Assets can be imported into the engine using drag and drop, or by simply copying them into the folder in the underlying file system and click reimport in the UI.
資源可以通過拖拽導入引擎，也可簡單的復制到對應目錄下，在界面上選擇導入。
Coding in QICI Engine
在青瓷引擎中編碼
What might not be immediately obvious is how you actually code in QICI and of all the features, this one is probably the least intuitive. You code by attaching behaviors to your game entities.
引擎的編碼可能不是那么的直觀，你需要通過幾個操作來實現編碼。
Start by right clicking the Scripts folder in the assets view and select New JavaScript File:
右擊資源界面中的腳本文件夾，選擇創建新的JavaScript文件：
Name your script and you will see that a stub script has been created for you, you can preview the code in the Inspector:
給你腳本起個名字，你會發現已經生成了一個基礎腳本，同時可以在屬性窗口中預覽它。
At this point you are probably best off firing up your favourite JavaScript editor and opening the generated script. You can jump to the script directly right clicking the script and select Open in Local File Explorer:
你可以使用你習慣的JavaScript編輯器打開剛才生成的腳本。你可以通過郵件菜單選擇Open in Local File Explorer在資源管理器中定位這個腳本。
You can however edit using the built in editor if you prefer:
你願意的話，也可以用內置的代碼編輯器編輯：
All scripts are qc.Behaviors. You will notice that this class implements a number of callback methods for various points in the games lifecycle such as awake, onDown, render, onDestroy, etc. By implementing these methods, we add functionality to our script. Consider this simple script, that causes a button to change it’s text to “Clicked” when clicked:
所有的腳本都是qc.Behaviors。你會注意到這個類實現了多個游戲運行時的事件函數，諸如awake, onDown, render, onDestroy等。通過實現這些事件函數，可以添加自己的功能。通過這個簡單的腳本，我們可以點擊按鈕來改變他的文本：
var ButtonHandler = qc.defineBehaviour('qc.engine.ButtonHandler', qc.Behaviour, function() { // need this behaviour be scheduled in editor //this.runInEditor = true; }, { // fields need to be serialized }); ButtonHandler.prototype.onClick = function() { this.gameObject.find("Text").text = "Clicked"; };
Now attach this script to the component by dragging and dropping, like so:
現在把這個腳本拖拽到他的組件上，如：
And you will see a new component has been added to our Button:
你可以看到一個新的組件已經添加到我們的按鈕上了：
Values can easily be exposed to the editor, like so:
變量可以很輕松地展現在編輯器中，如：
var ButtonHandler = qc.defineBehaviour('qc.engine.ButtonHandler', qc.Behaviour, function() { this.meaning = 42; }, { meaning : qc.Serializer.INT }); ButtonHandler.prototype.onClick = function() { this.gameObject.find("Text").text = "Clicked"; };
Resulting in:
結果如下：
Behind the scenes however, Phaser is always there. You can actually access Phaser directly using gameObject.phaser, like so:
在底層中包含了Phaser，我們可以直接使用gameObject.phaser，如：
ButtonHandler.prototype.onClick = function() { this.gameObject.find("Text").text = "Clicked"; alert(this.gameObject.phaser.game.width); };
Therefore, if you are familiar with Phaser, you should be immediately comfortable with QICI. For more help with Phaser, I have already created a fairly comprehensive tutorial series.
因此，如果你對Phaser很熟悉，你可以對青瓷引擎很快上手。需要了解更多Phaser的東西，我已經做了一個全面的系列教程。
Documentation and Community
文檔和社區
This is a very new project, just shipping the end of last year. There isn’t much of a community per say, but there is a fledgling question forum. Hopefully in time a proper community forms.
青瓷引擎於2015年12月才剛剛發布，因此論壇上還不豐富，不過里面有個問答板塊。
In terms of documentation however, QICI Engine is good, shockingly good in fact. There is a complete guide available here walking you through the fundamentals and primary components of QICI. With the exception of a good scripting guide and a document on program flow, I found everything I was looking for in sufficient detail to accomplish what I needed. There is also a very good searchable reference guideavailable here. Between the two, and with prior Phaser experience (which is also remarkably well documented), I had no trouble whatsoever getting up to speed. Additionally there is a pretty good collection of examples available here on Github.
青瓷引擎在文檔方面非常出色。有非常詳盡的用戶手冊帶你了解引擎的基本功能和相關組件，你能十分方便地實現你的需求。用戶手冊還提供強大的搜索功能。基於原有的Phaser經驗，能相當快地上手，此外還有不少的優秀示例工程
Frankly, for a young open source project, this is hands down the best documentation I have ever seen. Kudo QICI team.
作為一款年輕的開源項目，她的文檔和用戶手冊是我迄今為止見到過最棒的。感謝青瓷引擎項目組。
Summary
綜述
This is a game engine that takes one of my favourite HTML5 game engines (Phaser) and adds an incredibly polished layer of tooling on top of it. Additionally a straight forward component system is added, while not getting in the way of the underling libraries. If you are looking for a 2D HTML5 library, especially if you are already familiar or working with Phaser, this is a project you absolutely have to check out. It is robust, straight forward, well documented and well designed. Aside from the lack of community, there really isn’t much more you could ask of this great new engine!
這款游戲引擎在我非常喜歡的HTML5游戲引擎（Phaser）的基礎上封裝了很多出色的游戲組件。如果你正在尋找一款2D的HTML5游戲引擎，尤其是在你對Phaser熟悉的基礎上，青瓷引擎絕對是你的不二之選。她簡單易學、文檔齊全、設計合理且富有生命力。拋開目前尚不完善的論壇而言，你沒有什么理由來拒絕這款優質的游戲引擎。
I enjoyed my time with QICI and will be exploring it more in the future. Let me know if this engine interests you and if you would like to see some tutorials from GameFromScratch.
我非常享受使用青瓷引擎的這一過程，將來還會對其做更深入的研究。