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 用來...