Javascript

Getting started with LayaAir JavaScript

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. The majority of websites employ it and it is supported by all modern Web browsers without plug-ins.

Software requirement:

• FlashDevelop or LayaAir IDE : click on 下载 button to download
• LayaAir for JS : click on JS版 button to download

Installation Guide:

1. Integrated development environment * FlashDevelop :
   • [EMPTY SECTION]

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

2. Sample code:

• Hello Laya :

var Stage   = Laya.Stage;
var Text    = Laya.Text;
var Browser = Laya.Browser;
var WebGL   = Laya.WebGL;

(function()
	{
		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 = 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);
	})();

• 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 :

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

var ape = new laya.Sprite();
//Loading our monkey
ape.loadImage("layabox.png", 480, 320);

Laya.stage.addChild(ape);

• 3D display :

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

var skinMesh;
var skinAni;


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());

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)));
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, function () {
    scene.currentCamera.viewport = new Laya.Viewport(0, 0, Laya.stage.width, Laya.stage.height);
});

var directionLight = scene.addChild(new 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;

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

Further more:

• Official LayaAir samples