Using the new TypeScript samples

[singmajesty]

Hello everyone!

We have new TypeScript-based samples. I wanted to share briefly how to get started:

Download samples

You can download a zip or you can clone the repository from https://github.com/openfl/openfl-samples-ts to get ongoing updates

Open a sample and NPM install

Pick one of the samples (like “BunnyMark”) and run npm install to setup dependencies:

cd openfl-samples-ts/BunnyMark
npm install

Start a dev server

npm start

The project should compile, and open a browser window. Hot reloading is enabled, so make changes to the source *.ts files, and the project will automatically rebuild, and the window will reload.

Other notes

Need a code editor? https://code.visualstudio.com is a good choice with built-in support for TypeScript

Please post if you have any questions!

[Tyler_Turner]

Thank you for doing this! I’m really excited about this new approach.

[xinke]

Thank you for doing this! I’m really excited about this new approach.

[itzikiap]

Unbelievable! This is so cool. I really hope it will get the same love from the type script community as phaser and pixi.

[miltoncandelero]

does some of the code run on the server side?

(sorry if it’s a stupid question)

[singmajesty]

All of the code (in these samples) run on the client, but if users are interested in making code work from a server (such as Node.js) then we may make some improvements to better support that (long-term)

[singmajesty]

Hey guys, more samples added!

[Tyler_Turner]

Thanks! Wow, you added a lot of them.

[xinke]

Thanks I’m trying to use it.

[xinke]

stage set height bug：

[xinke]

I find a bug, getContext(‘2d’) is null. @singmajesty

[singmajesty]

The Stage constructor was (window:Window, background:Int), and still is in some code. I plan on unifying this more in the future, but for now, I believe that when using the NPM version of OpenFL, it should not hit the second case unless you pass a bad parameter to the first argument.

I have just updated the OpenFL library on NPM, with support for setting the renderer type in the constructor.

We use OpenGL (WebGL) by default, but now you should be able to choose a different renderer type:

var stage = new Stage (550, 400, 0xFFFFFF, App, { renderer: "canvas" });

var stage = new Stage (550, 400, 0xFFFFFF, App, { renderer: "webgl1" });

var stage = new Stage (550, 400, 0xFFFFFF, App, { renderer: "dom" });

We use "webgl" (or "opengl") by default, which uses WebGL 2 if available, and falls back to canvas if WebGL is not available. Using a different value can force use of WebGL 1 only, or using a 2D canvas (even if WebGL is available).

We also have a DOM-based renderer, which isn’t as heavily used, but allows mixing of DOM elements, such as this sample: https://github.com/openfl/openfl-samples-ts/tree/master/features/display/AddingDOMElements

[xinke]

Thanks , It works!

[xinke]

I want to set this canvas to be transparent, but this color can’t be set to transparent. @singmajesty
Whether this parameter can be modified to a string type (‘rgba(0,0,0,0)’).

[xinke]

I find some bugs about mask.
1, canvas: ok

2, webgl1: error

CODE:

import Sprite from "openfl/display/Sprite";
import Stage from "openfl/display/Stage";
import Bitmap from "openfl/display/Bitmap";
import BitmapData from "openfl/display/BitmapData";
import MouseEvent from "openfl/events/MouseEvent";
import Shape from "openfl/display/Shape";
import Event from "openfl/events/Event";


class App extends Sprite {
	
	test:Sprite;
	mas:Shape;
	constructor () {
		
		super ();
		BitmapData.loadFromFile ("openfl.png").onComplete ((bitmapData) => {
		
			var bitmap = new Bitmap (bitmapData);
			this.addChild (bitmap);
			bitmap.scaleX = bitmap.scaleY = 0.5;
			bitmap.x= bitmap.y = 50;

			this.test = new Sprite();
			this.test.graphics.beginFill(0xff0000);
			this.test.graphics.drawRect(0,0,100,100);
			this.test.graphics.endFill();
			this.addChild(this.test);
			this.test.x = this.test.y = 200;


			this.mas = new Shape();
			this.mas.graphics.beginFill(0x00ff00);
			this.mas.graphics.drawRect(0,0,25,50);
			this.mas.graphics.endFill();
			this.mas.x = this.mas.y = 50;
			this.test.addChild(this.mas);
		

			this.test.mask = this.mas;
			
			this.test.addEventListener(MouseEvent.MOUSE_DOWN,()=>{
				this.test.startDrag();
			});
			this.test.addEventListener(MouseEvent.MOUSE_UP,()=>{
				this.test.stopDrag(); 
			});
			
		});

		this.addEventListener(Event.ENTER_FRAME,()=>{
			if(this.mas != null)
				this.mas.rotation ++;
		});
	}
	
}

var stage = new Stage (550, 400, 0xffffff, App,{renderer: "canvas"});
document.body.appendChild (stage.element);
var canvas = document.getElementsByTagName('canvas')[0];
console.log(canvas);
console.log( canvas.getContext('2d') );  

[singmajesty]

I’ll take a look at the mask.

Meanwhile, try using null to get a transparent background

[singmajesty]

Thanks! I just found the issue

Enable stencil buffer on CommonJS WebGL builds

I forgot to enable the stencil buffer on our WebGL builds

(If you use OpenFL from source, I just added an npm run watch command, so it can recompile our CommonJS modules automatically upon changes to the source. It rebuilds all our files for now, but in the future we can probably improve it more)

EDIT: OpenFL has been updated on NPM with this fix

[xinke]

Thanks. it works

[xinke]

Thanks very very mush. it also works