CocosCreator微信小遊戲入門實戰《小貓釣魚》（一）：寫下第一行程式碼
吃飯先拿碗筷，想吃下“微信小遊戲”這盤2018年的大菜，我們也得先將我們的“吃飯工具”準備好：
- CocosCreator 2.0.2
安裝教程：
- 開啟下載好的7z壓縮包並解壓，執行CocosCreator_setup.exe
- 注意安裝路徑，然後瞎XX亂點就行
- 微信web開發者工具
安裝教程：執行安裝檔案，瞎幾把點……
OK，特別簡單是不是？在creator之前的Cocos簡直安裝賊繁瑣，參見網上各種各樣的教程現在簡單了，直接傻瓜式一鍵操作，對於新手很友好。
另外需要注意的是，別忘記註冊Cocos以及微信開發者。
在完成安裝之後，你可以開啟CocosCreator來開始第一個專案了。首先進入視線的是Dashboard，介面功能很簡單。稍微摸索一下基本就能理解。
接下來就新建一個新的空白專案。
點選新建專案後，等待數秒，我們的專案就建立好了，同時creator也會進入到專案編輯器的介面。
關於這個介面的基礎介紹，請參考官方文件
這裡就不詳細說明了
現在簡單介紹一下即將開發的這個小遊戲的玩法，很簡單，遊戲開始時向我們需要控制魚鉤向水裡深處前進，當魚鉤勾到魚時，小貓開始收魚線，把魚鉤向上拉，直到拉出水面，在這回收的過程中，我們需要控制魚鉤儘量多的勾到魚。
把需求搞清楚以後，我們就開始動手來開發吧。
資源下載：
首先，這是一個豎屏遊戲，而creator預設建立的是橫板遊戲，因此我們需要把遊戲豎起來。
在這個豎起來的過程中，你需要知道有兩個東西：設計解析度和螢幕解析度
關於這兩個“解析度”，可以參考官方教程：
我們選擇Canvas，將 DesignResolution修改為640*960。
接下來，我們需要把魚鉤給弄好。
- 選中Canvas，右鍵建立渲染節點Sprite，在編輯器的屬性檢查器中，將節點名改為Hook
（鄧紫棋：(╬▔皿▔)凸不要亂用我的Hook！！）
- 替換Hook的SpriteFrame為我們以及製作好的魚鉤資源
- 在assets中建立指令碼Hook.js，並將指令碼作為組建新增到節點Hook上
新增的方法為，點選節點Hook，在屬性檢查器中，新增元件à新增使用者指令碼元件àHook.js
- 在Hook.js指令碼中新增如下程式碼，來讓魚鉤動起來：
start () {
this.node.runAction(cc.repeatForever(cc.moveBy(5,cc.p(0,-100))));
},關於Sprite元件，參考官方教程：
OK，現在我們點選一下預覽遊戲，看看效果如何：
看了下效果 (⊙﹏⊙) 魚鉤向下移動沒錯，可是鏡頭沒有。沒關係，接下來我們處理這一塊的東西。
- Hook節點新增一個空子節點，節點名改為Camera。同時給這個節點新增元件，選擇其他元件中的Camera，這就是我們遊戲的攝像機了。
Camera作為Hook的子節點，這樣就可以讓鏡頭跟隨魚鉤進行移動嘍，而我們不需要額外再寫什麼程式碼
- Camera節點新增一個子節點，子節點型別為Widget，節點名改為HUD。這個節點我們主要用於放置一些UI節點。注意修改HUD的大小為640*960
Camera的背景顏色改為藍色（ /(ㄒoㄒ)/~~因為沒有做背景圖片啊 ）
Camera的cullingMask以及clearFlag進行設定：
並且將MainCamera的cullingMask以及clearFlag進行設定;
- 在HUD下面新增一個Label，用於Score顯示，座標設定到左上角。
好了，這樣就完成魚鉤以及攝像頭，以及UI的部分功能嘍。
為了能看出效果，我添加了一下背景，畢竟需要參照物才能看出來
怎麼樣，是不是有點樣子了？