The first program: display “Hello Layabox” text(첫 번째 프로그램 : "Hello Layabox"텍스트 표시)

The first program: display “Hello Layabox” text
(첫 번째 프로그램 : "Hello Layabox"텍스트 표시)

[Note] before reading this article, you must read the “JS project and detailed the directory structure”.
([참고]이 기사를 읽기 전에 "JS 프로젝트 및 디렉토리 구조를 자세히"읽어야합니다.)
Step 1:select the SRC right click, then left-click “New File”, and set up a HelloLayabox.js file in the src directory.
(1 단계 : SRC를 마우스 오른쪽 버튼으로 클릭 한 다음 "새 파일"을 마우스 왼쪽 버튼으로 클릭하고 src 디렉토리에 HelloLayabox.js 파일을 설정하십시오.)
​ 图片
Step 2: Click open HelloLayabox.js src directory, began to write the following code:
(2 단계 : HelloLayabox.js src 디렉토리를 열어 다음 코드를 작성합니다.)
  1. //创建舞台,默认背景色是黑色的(무대 만들기, 기본 배경색은 검은 색입니다.)
  2. Laya.init(600, 300);
  3. var txt = new Laya.Text();
  4. //设置文本内容(텍스트 콘텐츠 설정)
  5. txt.text = "Hello Layabox";
  6. //设置文本颜色为白色,默认颜色为黑色(텍스트 색상을 흰색으로 설정하고, 기본 색상은 검정색으로 설정합니다.)
  7. txt.color = "#ffffff";
  8. //将文本内容添加到舞台 (스테이지에 텍스트 콘텐츠 추가)
  9. Laya.stage.addChild(txt);
Step 3:After encoding, press F5 to compile, in the page that pops up, we can see the running result of the code, as the following figure shows:
(3 단계 : 인코딩 후 F5 키를 눌러 컴파일하면 나타나는 페이지에서 다음 그림과 같이 코드의 실행 결과를 볼 수 있습니다.)
​ 图片
​ Step 4:After the display is successful, close the display window. We continue to write code to make the text look beautiful. Continue to improve the code is as follows:
(4 단계 : 디스플레이가 성공적으로 완료되면 디스플레이 창을 닫습니다. 우리는 텍스트를 아름답게 보이도록 코드를 작성합니다. 코드를 향상시키기 위해 다음과 같이 계속하십시오 :)
  1. //创建舞台,默认背景色是黑色的(무대 만들기, 기본 배경색은 검은 색입니다.)
  2. Laya.init(600, 300);
  3. var txt = new Laya.Text();
  4. //设置文本内容(텍스트 콘텐츠 설정)
  5. txt.text = "Hello Layabox";
  6. //设置文本颜色(텍스트 색상 설정)
  7. txt.color = "#FF0000";
  8. //设置文本字体大小,单位是像素(텍스트 글꼴 크기를 픽셀 단위로 설정합니다.)
  9. txt.fontSize = 66;
  10. //设置字体描边(글꼴 획 설정)
  11. txt.stroke = 5;//描边为5像素(획은 5 픽셀입니다.)
  12. txt.strokeColor = "#FFFFFF";
  13. //设置为粗体(굵게 설정)
  14. txt.bold = true;
  15. //设置文本的显示起点位置X,Y(텍스트 X, Y의 표시 시작 위치 설정)
  16. txt.pos(60,100);
  17. //设置舞台背景色(무대 배경색 설정)
  18. Laya.stage.bgColor = '#23238E';
  19. //将文本内容添加到舞台 (스테이지에 텍스트 콘텐츠 추가)
  20. Laya.stage.addChild(txt);
Step five: After the writing is completed, it is compiled again by F5, and the result of the beautification is as shown in the following figure.
(5 단계 : 쓰기가 끝나면 F5로 다시 컴파일되고 다음 그림과 같이 미화 결과가 표시됩니다.)
​ 图片
  At this point, if you can follow this introductory tutorial and finish the display above, congratulations on your successful entry, we have completed the first LayaAir engine HTML5 program developed in JavaScript language. For more API use developed by the LayaAir engine, go to the Layabox Developer Center of the official website to see the tutorial.
       (이 시점에서이 입문서를 읽고 위의 디스플레이를 완료하면 성공적인 입력을 축하 드리며 JavaScript 언어로 개발 된 첫 번째 LayaAir 엔진 HTML5 프로그램을 완료했습니다. LayaAir 엔진이 개발 한 더 많은 API를 사용하려면 공식 웹 사이트의 Layabox 개발자 센터로 이동하여 자습서를 참조하십시오.)

댓글 없음:

댓글 쓰기