createjs初學 BitmapText使用例項

2021-07-04 06:02:02 字數 3993 閱讀 2986

bitmaptext就是用spritesheet中定義的來顯示相應的文字,建構函式如下

bitmaptext ([text=""] [spritesheet=null] )
有兩個引數,都是可選的

text表示要顯示的文字,spritesheet是使用的spritesheet

這兩個值也都可以通過相應的屬性來設定

bitmaptext.spritesheet=spritesheet;

bitmaptext.text="test"

;

我把官方的例子copy了一下,**有點長,但大部分都是資料,關鍵的只有幾行。

這個是官方例子使用的文字。

window.onload=init;

var canvas;

var canvaswidth;

var canvasheight;

var stage;

function init()

, "a": ,

",": ,

"w": ,

"b": ,

"x": ,

"c": ,

".": ,

"y": ,

"d": ,

"z": ,

"e": ,

"f": ,

"g": ,

"h": ,

"i": ,

"j": ,

"k": ,

"!": ,

"l": ,

"m": ,

"n": ,

"o": ,

"p": ,

"q": ,

"r": ,

"s": ,

"t": ,

"?": ,

"u":

},"images": ["assets/spritesheet_font.png"],

"frames": [

[155, 2, 25, 41, 0, -10, -3],

[72, 2, 28, 43, 0, -8, -1],

[599, 2, 28, 38, 0, -8, -4],

[41, 2, 27, 44, 0, -8, -1],

[728, 2, 32, 38, 0, -6, -4],

[184, 2, 35, 41, 0, -4, -2],

[409, 2, 30, 39, 0, -7, -3],

[443, 2, 29, 39, 0, -7, -3],

[901, 2, 13, 35, 0, -8, -5],

[698, 2, 26, 38, 0, -9, -4],

[666, 2, 28, 38, 0, -8, -4],

[764, 2, 23, 38, 0, -10, -4],

[828, 2, 37, 36, 0, -3, -5],

[567, 2, 28, 38, 0, -8, -4],

[519, 2, 44, 38, 0, 1, -4],

[869, 2, 28, 36, 0, -8, -5],

[476, 2, 39, 38, 0, -2, -4],

[371, 2, 34, 39, 0, -5, -3],

[631, 2, 31, 38, 0, -6, -4],

[289, 2, 39, 40, 0, -2, -3],

[918, 2, 31, 32, 0, -6, -7],

[791, 2, 33, 37, 0, -5, -4],

[2, 2, 35, 46, 0, -4, 1],

[253, 2, 32, 40, 0, -6, -3],

[104, 2, 32, 43, 0, -6, -1],

[332, 2, 35, 39, 0, -5, -4],

[953, 2, 9, 16, 0, -17, -29],

[140, 2, 11, 41, 0, -16, -1],

[223, 2, 26, 41, 0, -7, -1],

[966, 2, 9, 10, 0, -17, -31]]};

var spritesheet=new createjs.spritesheet(data);

var str="hello what the ****!"

; var bitmaptext=new createjs.bitmaptext(str,spritesheet);

stage.addchild(bitmaptext);

}

顯示結果如下,

其中data定義了每個字元對應的的位置。然後建立spritesheet,再根據spritesheet建立bitmaptext就好了。

(細心的讀者可能發現了在**裡的字串裡字母有大寫有小寫,但是出來的都是大寫。我測試了一下,發現是這樣的,比如說」a」,如果data裡面指定」a」這個字元使用的圖,就使用它,如果沒有就是用」a」。如果在data裡面沒有對應的字元,就直接不顯示)

這個類用於顯示英語很方便,但是中文這麼多字,作用就有限了。但是可以用來做顯示遊戲中的數字,畢竟數字就那麼幾個。

我下面寫了個例子。

這個是我用到的圖:

這裡面每個數字都是100*100的。

window.onload=init;

var canvas;

var canvaswidth;

var canvasheight;

var stage;

function init()

, animations:

,"1":,

"2":,

"3":,

"4":,

"5":,

"6":,

"7":,

"8":,

"9":,

".":}};

var spritesheet=new createjs.spritesheet(data);

var bitmaptext=new createjs.bitmaptext("12138",spritesheet);

stage.addchild(bitmaptext);

}

顯示的結果如下

還有兩個常用的屬性,簡單說下

letterspacing

這個屬性用來設定每個字元間的間隔

bitmaptext.letterspacing=50;
效果如下

也可以設定為負數,然後這些字就會擠在一起。

spacewidth

這個值用來設定空格字元顯示的寬度。

如果在data中沒有設定空格字元對應的,空格多佔的寬度就是這個值的大小。如果這個值是0,就會按順序查詢」1」, 「l」, 「e」, 「a」這幾個字元,先找到哪個就按照哪個的寬度來顯示,如果都沒有的話,就按照第乙個frame中的寬度來計算。

這個值預設是0。

var bitmaptext=new createjs.bitmaptext("1 2138",spritesheet);

bitmaptext.spacewidth=50;

顯示效果如下

canvas框架 createjs入門

開發createjs的動畫或遊戲,沒有重型的ide或什麼工具支援,我們只能從零開始寫js。一方面,這樣對於jser來說,足夠靈活 另外一方面,createjs因此足夠精簡足夠小。createjs由幾個庫組成 l easeljs,這個是核心,包括了顯示列表 事件機制 l preloadjs,用於預載入...

createjs 小遊戲開發實戰

這裡來一篇小遊戲實戰篇。效果圖 錄屏的時候有點卡 demo位址 如果對你有用,請點 star 遊戲整體思路實現 1.實現乙個無縫連線的背景圖,模擬出汽車在加速的狀態 this.backdrop new createjs.bitmap bg this.backdrop.x 0 this.backdro...

php mysql 初學 初學PHP MySQL

php echo print 都能輸出文字 date format,timestamp 可以格式化時間戳 mktime 可以返回指定日期的時間戳 include filename 或者 require filename 可以包含另外的php檔案,就像c中包含別的庫一樣 fopen fclose 用來...