官方文档里的位图字体的制作与使用JS 跑不通 以及 文档的几个问题

https://ldc2.layabox.com/doc/?nav=zh-js-1-2-5
 
你好,我是新手,跟着文档简介-2D基础篇这样跑下来的。 文档里的代码我贴在最后,有几个问题想问下。
 
1.示例里除了第一个hello,其它都没有说明代码放在什么文件和怎么调用;hello那个没有提import。
 
2.我就是自建文件,然后在Main.js里import它了。 这是官方的方式吗?
 
3.我的报错 
TypeError: Cannot set property 'mFontName' of undefined
 
at Object.2 (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:279:21)
 
at o (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:265)
 
at file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:316
 
at Object.3../GameConfig (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:313:1)
 
at o (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:265)
 
at r (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:431)
 
at file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:460
 
4.这个位图字体教程的代码应该放在哪里,怎么引用,其中的this是指? 我自建了单独的文件,并在Main里import了它,输出看是undefined。
 
5.几处的路径不一致,它们的关系是? 
a.如图:把test_0.png名字改为test.png,保证跟fnt文件同名。再把test.png和test.fnt文件放到H5目录下。
b.
  1. //这里不需要扩展名,外部保证fnt与png文件同名
  2. this.mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Laya.Handler(this,onLoaded));

c.将字体文件放到 LayaAir IDE 项目的资源目录中(laya/assets/)
d.
 
6.完整代码如下所示:

 

  1. //初始化引擎
  2. Laya.init(550,400);
  3. //自定义文件名称
  4. this.mFontName = "diyFont";
  5. this.mBitmapFont = new Laya.BitmapFont();
  6. //这里不需要扩展名,外部保证fnt与png文件同名
  7. this.mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Laya.Handler(this,onLoaded));
  8.  
  9. function onLoaded(){
  10. init();
  11. }
  12. function init(){
  13. //如果位图字体中,没放空格,最好设置一个空格宽度
  14. this.mBitmapFont.setSpaceWidth(10);
  15. Laya.Text.registerBitmapFont(this.mFontName,this.mBitmapFont);
  16. var txt = new Laya.Text();
  17. txt.text = "这是测试";
  18. //设置宽度,高度自动匹配
  19. txt.width = 250;
  20. //自动换行
  21. txt.wordWrap = true;
  22. txt.align = "center";
  23. //使用我们注册的字体
  24. txt.font = this.mFontName;
  25. txt.fontSize = 50;
  26. txt.leading = 5;
  27. Laya.stage.addChild(txt);
  28. }

已邀请:

hj

赞同来自:

直接写在main.js里也行,自己建一个引用也行,代码里的语法问题,文档会改正
//初始化引擎
Laya.init(550,400);
//自定义文件名称
var mFontName = "diyFont";
var mBitmapFont = new Laya.BitmapFont();
//这里不需要扩展名,外部保证fnt与png文件同名
mBitmapFont.loadFont("res/test.fnt",new Laya.Handler(this,onLoaded));
function onLoaded(){
init();
}
function init(){
//如果位图字体中,没放空格,最好设置一个空格宽度
mBitmapFont.setSpaceWidth(10);
Laya.Text.registerBitmapFont(mFontName,mBitmapFont);
var txt = new Laya.Text();
txt.text = "asdfghjk";
//设置宽度,高度自动匹配
txt.width = 250;
//自动换行
txt.wordWrap = true;
txt.align = "center";
txt.color = "ff00ff";
//使用我们注册的字体
txt.font = mFontName;
txt.fontSize = 50;
txt.leading = 5;
Laya.stage.addChild(txt);
}

该问题目前已经被锁定, 无法添加新回复

商务合作
商务合作