在看我這篇文章之前,首先您應該掌握一些基本知識,一是瞭解和使用cocos creator的常用控件,如Button,Label,Sprite等,腳本事件綁定等;Vscode的基本操作;TypeScript的基本語法;還有你需要安裝java環境,安裝Android Studio,下載NDK,Android SDK,搭建原生開發環境,爲後續的打安卓包做準備;還有安裝phython環境,下載node.js,使用npm install -g typescript來安裝ts,你就可以操作如何把ts文件轉化爲js,當然Cocos Creator是把我們自動編譯,但作爲學習,我們應該去了解細節.還有get-ExecutionPolicy和set-ExecutionPolicy RemoteSigned設置腳本執行策略等等.
當然還有最重要的一點,有不懂的東西,要學會主動去百度,去B站,去論壇找答案,你必須相信,你如今工作和學習遇到的絕大多數問題,網上都有非常優秀的解決方法,而且不止一種,你要做的應該是,減少摸索的時間,站在前人的肩膀上,集百家之長,混成一家.
當我們準備好了上面的一切以後,我們開始開發小遊戲跳一跳,先在此聲明,我遊戲使用的素材,都百度找的,我只用於自我開發遊戲學習,不會商用.
先上思維導圖
1.首先介紹一下什麼是預製體(Prefab)
關於預製體的介紹Cocos官網有相關闡述:
http://docs.cocos.com/creator/manual/zh/asset-workflow/prefab.html
我個人理解,用簡單的話來說,就是利用編譯器的現有組件來組裝一個全新的你自己目前需要的組件,說白了,就是new一個對象,由開發者來賦予這個對象具有那些屬性.
上面是我做的一個方塊預製體,這個預製體有一個icon是用來存方塊圖片的,還有mid,up等這些點,是用來確定棋子跳到方塊上面的有效着陸點.這裏有兩個技巧,首先我們創建一個空節點,在空節點下面,創建一個方塊圖片Sprite(精靈)和一個Sprite(單色).單色的會和空節點的座標一致,把精靈圖片移動,圖片最下方對準單色.至於mid,up這些單色點怎麼來的,首先你要創建一個棋子的節點,把棋子往方塊上面放來確定這些點,這個需要實際去操作,我自己弄了幾遍就很熟練了.
2.創建棋子
棋子要實現三個表現,移動,旋轉,壓縮,所以採用三個節點去分別控制,如圖
移動我們用cc.jumpTo(0.5, target_pos, 200, 1),表示0.5s,移動到target_pos位置,高度200,跳躍一次
旋轉我們用cc.rotateBy(0.5, 360 * this.direction)表示0.5秒,順時針旋轉360度或者逆時針旋轉360度
壓縮我們用cc.scaleTo(2, 1, 0.5)表示2s內壓縮一半
creator編輯器默認錨點是(0.5,0.5),考慮到壓縮的表象,我們把壓縮用的圖片錨點y軸方向的改爲0
爲了造成拖曳的效果,我們可以使用Motion Streak組件
還需要了解註冊事件
cc.Node.EventType.TOUCH_START是當手指觸摸到屏幕時
cc.Node.EventType.TOUCH_END是當手指在目標節點區域內離開屏幕
cc.Node.EventType.TOUCH_CANCEL是當手指在目標節點區域外離開屏幕時
3.convertToWorldSpaceAR()和convertToNodeSpaceAR()
convertToWorldSpaceAR()表示把節點座標系下的一個點轉換到空間世界座標系
如:var mid_pos:any = this.mid_pos.convertToWorldSpaceAR(cc.v2(0, 0));
就是把以this.mid_pos這個節點爲參考系下的原點,轉換爲世界座標,一般來講原點在左下角,但是上面提到creator編輯器默認錨點是(0.5,0.5),所以此時原點的方向就是這個節點的中心點,也就是把中心點轉換爲世界座標了
converToNodeSpaceAR()表示將一個點轉換爲節點座標系
如:var w_pos: cc.Vec2 = this.cur_block.getChildByName("mid").convertToWorldSpaceAR(cc.v2(0, 0));
this.game_player.setPosition(this.map_root.convertToNodeSpaceAR(w_pos))
setPosition是設置節點在父節點座標系中的位置
上面是代碼是爲了實現遊戲開始時,棋子在方塊中間位置着落.那是怎麼實現的呢
就是先把方塊中心點變爲世界座標,然後把w_pos轉換爲this.map_root這個節點座標系下的局部座標,而this.game_players是屬於
this.map_root節點的子節點,setPosition就是把棋子現在的位置設置到w_pos轉換的局部座標上去
爲啥我要講世界和局部座標轉換呢,因爲這是完成遊戲的一個關鍵點
4.方塊的生成
我們剛開始談到了預製體,我們可以做很多個圖片不一樣的方塊預製體,並把它們放入預製體數組中
@property([cc.Prefab])
block_prefab: Array<cc.Prefab> = [];
然後通過Math.random()來隨機取數
this.cur_block = cc.instantiate(this.block_prefab[Math.floor(Math.random() * 3)]);
Math.random()是左閉右開區間,隨機取0到1的數,取不到1,如果乘以3,則就是隨機取0到3之間的數,
利用Math.floor()向下取整,只會取到了0,1,2這三個數中的一個,而ts的數組下標是從0開始的
5.屏幕的移動
棋子是向右跳或者向左跳,x座標可能是增加,也可能是減少,但是y座標肯定是增加的
所以我們要隨機取方向,this.direction = (Math.random() < 0.5) ? -1 : 1;
移動屏幕使用cc.moveBy(0.5, offect_x, offect_y)
var seq:any = cc.sequence(m1, endfunc);
this.map_root.runAction(seq);
cc.sequence()順序執行動作,先執行m1動作,再執行endfunc動作
6.棋子是否落在方塊有效範圍
就是計算棋子着落的點,方塊可着落範圍的邊界點做比較,計算兩點之間的距離,如果小於100像素,則落在有效範圍
7.遊戲流程控制
是否開始遊戲可以設置一個boolean值,is_can_game:boolean = false;默認爲false,點擊開始遊戲以後,變爲true;
當棋子沒有落在有效位置,彈出再來一次,點擊再來一次,可以重新加載場景,來重置遊戲cc.director.loadScene('main_scene');