Egret 자습서(2, HelloWorld)
13515 단어 Egret
background: #888888;
전체 홈 코드:
<html>
<head>
<meta charset="utf-8">
<title>Egrettitle>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style>
html, body {
-ms-touch-action: none;
background: #888888;
padding: 0;
border: 0;
margin: 0;
height: 100%;
}
style>
<script egret="lib" src="libs/modules/egret/egret.js" src-release="libs/modules/egret/egret.min.js">script>
<script egret="lib" src="libs/modules/egret/egret.web.js" src-release="libs/modules/egret/egret.web.min.js">script>
<script egret="lib" src="libs/modules/res/res.js" src-release="libs/modules/res/res.min.js">script>
<script egret="lib" src="libs/modules/tween/tween.js" src-release="libs/modules/tween/tween.min.js">script>
<script egret="game" src="bin-debug/Main.js">script>
<script egret="game" src="bin-debug/Utils/CommonUtil.js">script>
head>
<body>
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
data-entry-class="Main"
data-orientation="auto"
data-scale-mode="showAll"
data-frame-rate="30"
data-content-width="1080"
data-content-height="1080"
data-show-paint-rect="false"
data-multi-fingered="2"
data-show-fps="false" data-show-log="false"
data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9">
div>
<script>
// WebGL
egret.runEgret({renderMode:"webgl"});
script>
body>
html>
여기서 여러 항목의 설정을 구성할 수 있습니다.
2. egretProperties.json 이 파일에서 프로젝트 설정을 하는데 모듈과 제3자 라이브러리의 설정, 발표와native 관련 설정을 포함한다.우리가 비교적 자주 사용하는 설정은 모듈과 제3자 라이브러리를 추가하는 것이다.
프로젝트 모듈식 구성:http://edn.egret.com/cn/index.php/article/index/id/644
셋째,tsconfig를 사용합니다.json 프로젝트 설정 파일 역할: 사용자 정의 컴파일 매개 변수입니다.tsconfig.제이슨이 뭐죠?typescript에 익숙한 친구는 낯설지 않을 것입니다. typescript 프로젝트의 프로필입니다. ts컴파일러의 컴파일 파라미터를 읽을 수 있습니다.
기타 컴파일 매개변수:https://github.com/Microsoft/TypeScript/wiki/tsconfig.json지원되지 않는 컴파일 매개변수: "target", "outDir", "module", "noLib", "outFile", "rootDir", "out"
1) egret 프로젝트의 폴더에'tsconfig.json'이라는 텍스트 파일을 만듭니다
2) 다음 예와 같이 컴파일링 매개 변수를compiler Options에 씁니다.
{
"compilerOptions": {
"sourceMap": true,
"removeComments": true
}
}
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
//
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(e:egret.Event){
console.log(" : log ")
}
private onFrame(e:egret.Event){
// true ，false 。 。
return false;
}
}
5. 디버깅: 더러운 사각형과 프레임 속도 정보 보이기
루트 디렉터리에 있는 index로.html에서: 1. 다시 그리는 영역을 표시할지 설정합니다. 이 값이true일 때 egret은 스테이지의 다시 그리는 영역을 빨간 상자로 표시합니다.
data-show-paint-rect=”true/false”
2. 프레임 속도 정보를 표시할 지 설정합니다. 이 값이true일 때 Egret은 스테이지의 왼쪽 상단에 FPS와 기타 성능 지표를 표시합니다
data-show-fps=”true/false”
좋은 웹페이지 즐겨찾기
