TypeScript

Getting started with LayaAir TypeScript

TypeScript is a free and open source programming language developed and maintained by Microsoft. Designed for development of large applications and transcompiles to JavaScript. More info at: typescriptlang

Software requirement:

• Visual Studio 2015 or LayaAir IDE : click on 下载 button to download
• LayaAir for TS : click on TS版 button to download

Installation Guide:

1. Integrated development environment * Visual Studio 2015 :
   • [EMPTY SECTION]

* LayaFlash IDE :
 - [LayaAir with TS](http://ldc.layabox.com/index.php?m=content&c=index&a=show&catid=29&id=158)

2. Sample code:

• Hello Laya :

/// <reference path="../../libs/LayaAir.d.ts" />
import Stage = laya.display.Stage;
import Text = laya.display.Text;
import Browser = laya.utils.Browser;
import WebGL = laya.webgl.WebGL;

class Text_ComplexStyle{

    constructor(){
		Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

		Laya.stage.alignV = Stage.ALIGN_MIDDLE;
		Laya.stage.alignH = Stage.ALIGN_CENTER;

		Laya.stage.scaleMode = "showall";
		Laya.stage.bgColor = "#232628";

		var txt: Text = new Text();
		txt.text = "Hello Laya !";
			
		txt.width = 400;

		txt.wordWrap = true;

		txt.align = "center";
		txt.fontSize = 40;
		txt.font = "Microsoft YaHei";
		txt.color = "#25B6A0";
		txt.bold = true;
		txt.leading = 5;

		txt.stroke = 2;
		txt.strokeColor = "#ffffff";

		txt.borderColor = "#00ff00"

		txt.x = (Laya.stage.width - txt.textWidth) / 2;
		txt.y = (Laya.stage.height - txt.textHeight) / 2;

		Laya.stage.addChild(txt);
    }
}
new Text_ComplexStyle();

• Display 2D image :

• Add your asset ressource layabox.png in bin/h5/ folder, you can get some from layaair-examples
• then write the following code :

/// <reference path="../../libs/LayaAir.d.ts" />
class Sprite_DisplayImage{

    constructor(){
        Laya.init(480, 320);
        Laya.stage.scaleMode = "showall";

        var ape = new Laya.Sprite();
        //Loading our monkey
        ape.loadImage("layabox.png",  0, 0 , 240, 160);

        Laya.stage.addChild(ape);
    }
}
new Sprite_DisplayImage();

• 3D display :

• Add your asset ressource dude-him.lm, dude.ani in bin/h5/ folder, you can get some from layaair-examples
• then write the following code :

class SkinAnimation_MultiSubMeshSample {
    private skinMesh: Laya.Mesh;
    private skinAni: Laya.SkinAnimations;

    constructor() {

        Laya.Laya3D.init(0, 0);
        Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;
        Laya.Stat.show();

        var scene = Laya.stage.addChild(new Laya.Scene()) as Laya.Scene;

        scene.currentCamera = (scene.addChild(new Laya.Camera(new Laya.Viewport(0, 0, Laya.stage.width, Laya.stage.height), Math.PI / 3, 0, 0.1, 100))) as Laya.Camera;
        scene.currentCamera.transform.translate(new Laya.Vector3(0, 0.8, 1.0));
        scene.currentCamera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false);
        scene.currentCamera.clearColor = null;
        Laya.stage.on(Laya.Event.RESIZE, null, () => {
            (scene.currentCamera as Laya.Camera).viewport = new Laya.Viewport(0, 0, Laya.stage.width, Laya.stage.height);
        });

        var directionLight = scene.addChild(new Laya.DirectionLight()) as Laya.DirectionLight;
        directionLight.direction = new Laya.Vector3(0, -0.8, -1);
        directionLight.ambientColor = new Laya.Vector3(0.7, 0.6, 0.6);
        directionLight.specularColor = new Laya.Vector3(2.0, 2.0, 1.6);
        directionLight.diffuseColor = new Laya.Vector3(1, 1, 1);
        scene.shadingMode = Laya.BaseScene.PIXEL_SHADING;

        this.skinMesh = scene.addChild(new Laya.Mesh()) as Laya.Mesh;
        this.skinMesh.load("threeDimen/skinModel/dude/dude-him.lm");
        this.skinMesh.transform.localRotationEuler = new Laya.Vector3(0, 3.14, 0);
        this.skinAni = this.skinMesh.addComponent(Laya.SkinAnimations) as Laya.SkinAnimations;
        this.skinAni.url = "threeDimen/skinModel/dude/dude.ani";
        this.skinAni.play();

    }
}
new SkinAnimation_MultiSubMeshSample();

Further more:

• Official LayaAir samples