Bezier Game有什么優(yōu)點(diǎn)

本篇內(nèi)容主要講解“Bezier Game有什么優(yōu)點(diǎn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Bezier Game有什么優(yōu)點(diǎn)”吧!

　　BezierGame一個(gè)基于Web的Photoshop鋼筆工具練習(xí)游戲，對于使用Photoshop的設(shè)計(jì)師來說，如果你掌握不好鋼筆工具，不妨試試這款鋼筆游戲，可以幫助你更好的掌握鋼筆工具的實(shí)用技巧。擁有鋼筆工具的軟件：Photoshop、Illustrator、Flash、Fireworks、CorelDraw等圖形圖像類設(shè)計(jì)軟件。常見于Adobe公司的系列軟件。鋼筆工具是在繪圖軟件中，用來創(chuàng)造路徑的工具，創(chuàng)造路徑后，還可再編輯。鋼筆工具屬于矢量繪圖工具，其優(yōu)點(diǎn)是可以勾畫平滑的曲線，在縮放或者變形之后仍能保持平滑效果。

　　貝塞爾曲線練習(xí)怎么辦

　　在使用CocosCreator做曲線動(dòng)作時(shí)，總是有些刻意逃避使用cc.bezierTo（貝塞爾曲線），而是簡單使用cc.moveTo、cc.JumpTo來模擬，后來更偷懶直接使用Creator的動(dòng)畫編輯器來生成，雖然上面的方法也能解決一些問題，但總是舍近求遠(yuǎn)，有簡單的方法面不用，原因是自己沒搞明白。

　　貝塞爾曲線練習(xí)工具怎樣

　　為了能將cc.bezierTo真正利用起來，我結(jié)合cc.Graphics組件制作了一個(gè)簡易的貝塞爾曲線編輯工具。

　　圖中是兩條曲線，在編輯器中直接改變起點(diǎn)、終點(diǎn)、控制點(diǎn)1、控制點(diǎn)2的位置，即可實(shí)時(shí)顯示出曲線路徑。

　　左則DrawBezier組件面板中有一個(gè)Params的文本屬性，就是cc.bezierTo可使用到的參數(shù)，結(jié)構(gòu)如下：

　　[

　　[//曲線一

　　{"x":-123,"y":214},//起點(diǎn)

　　{"x":-418,"y":214},//控制點(diǎn)1

　　{"x":-418,"y":42},//控制點(diǎn)2

　　{"x":-92,"y":42}//終點(diǎn)

　　],

　　[//曲線二

　　{"x":-92,"y":42},

　　{"x":-26,"y":235},

　　{"x":90,"y":266},

　　{"x":228,"y":134}

　　]

　　]

　　將這個(gè)場景運(yùn)行起來也可以修改編輯曲線，使用上面生成的參數(shù)可以預(yù)覽到cc.bezierTo動(dòng)作的效果：

　　貝塞爾曲線.gif

　　3

　　下面簡單介紹一下相關(guān)組件屬性，先看一下圖中的兩個(gè)紅色起點(diǎn)上的組件

　　不論是起點(diǎn)、終點(diǎn)、控制點(diǎn)，都有一個(gè)Dragable組件，負(fù)責(zé)實(shí)現(xiàn)節(jié)點(diǎn)的拖動(dòng)

　　圖中的兩個(gè)紅色節(jié)為起點(diǎn)，上面掛了一個(gè)BezierAction組件，Target屬性它的是終點(diǎn)節(jié)點(diǎn)，Ctrl1、Ctrl2分別是它的控制點(diǎn)。

　　再看一下DrawBezier繪圖組件屬性：

　　image.png

　　在場景中添加一個(gè)節(jié)點(diǎn)，掛載一個(gè)cc.Graphics

　　掛載DrawBezier組件，BezierActions是一個(gè)BezierAction組件的數(shù)組，將上圖中的兩個(gè)紅色節(jié)點(diǎn)拖動(dòng)到此處即可

　　ActionNode是用于執(zhí)行cc.bezierTo的節(jié)點(diǎn)，前面圖中的金幣

　　Duration是每條曲線的持續(xù)時(shí)間，（目前來看該屬性放在BezierAction組件上更好）

到此，相信大家對“Bezier Game有什么優(yōu)點(diǎn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！