lokhmakov

Thanks. Next solution works fine: downloadBtn.addEventListener("click", e => { app.render(); const imageUrl = app.renderer.plugins.extract.base64(); let link = document.createElement("a"); link.href = imageUrl; link.download = "picture.png"; link.style.display = "none"; document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); });

Hello, Is there way to extract webgl canvas to image with smooth edges? https://codesandbox.io/s/r54q7365yq import "./styles.css"; import * as PIXI from "pixi.js"; import * as Viewport from "pixi-viewport"; const app = new PIXI.Application(window.innerWidth, window.innerHeight, { antialias: true, resolution: 1, backgroundColor: "gray", view: document.getElementById("app-canvas") }); const texture = PIXI.Texture.from("/public/bg.jpg"); const sprite = new PIXI.Sprite(texture); app.stage.addChild(sprite); const sampleTexture = new PIXI.Texture.from("public/wall.png"); const sample = new PIXI.Sprite(sampleTexture); sample.x = 100; sample.y = 100; sample.width = 300; sample.height = 300; const mask = new PIXI.Graphics(); mask.beginFill(0xffffff); mask.drawCircle(window.innerWidth / 2, window.innerWidth / 2, 100); mask.endFill(); sample.mask = mask; app.stage.addChild(sample); // download canvas const downloadBtn = document.getElementById("download-btn"); downloadBtn.addEventListener("click", e => { const imageUrl = app.renderer.plugins.extract.base64(app.stage); let link = document.createElement("a"); link.href = imageUrl; link.download = "picture.png"; link.style.display = "none"; document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); });

Hi, I can't find in main page links to docs and examples. I think for new users, it looks very strange, and we lose them.

Thanks. But u miss link to related topic

Phaser 2.0.5 working code for you situation: o.inputEnabled = true;o.input.enableDrag(false);

I already ask this question. Nobody answered

up

Because context of call "create" is Phaser.Game, but u think that FlappyBirdsGame. For normal work on project, you need to use separate classes for Game, States and other, like this: module SlashSystem { export class Game extends Phaser.Game { static screen: string = 'small'; static srx: number = Math.max(window.innerWidth,window.innerHeight); static sry: number = Math.min(window.innerWidth,window.innerHeight); static logicWidth = window.innerWidth; static logicHeight = window.innerHeight; static r = Game.logicWidth / Game.logicHeight; static gameWidth: number; static gameHeight: number; static viewX: number; static viewY: number; static viewWidth: number; static viewHeight: number; //dirty: boolean = true; static calcSize() { if (Game.srx >= 360){ Game.screen = 'small'; Game.gameWidth = 360; } if (Game.srx >= 480){ Game.screen = 'normal'; Game.gameWidth = 480; } if (Game.srx >= 720){ Game.screen = "large"; Game.gameWidth = 720; } if (Game.srx >= 940){ Game.screen = "xlarge"; Game.gameWidth = 1024; } if (Game.srx >= 1200){ Game.screen = "xxlarge"; Game.gameWidth = 480; } var device = new Phaser.Device(<any>null); if (device.desktop){ Game.screen = "xxlarge"; Game.gameWidth = window.innerWidth; } device = null; Game.gameHeight = Game.gameWidth / Game.r; } static convertWidth (value) { return value / Game.logicWidth * Game.gameWidth; } static convertHeight (value) { return value / Game.logicHeight * Game.gameHeight; } bFontsReady: boolean = false; constructor() { super(Game.gameWidth, Game.gameHeight, Phaser.CANVAS, 'game', null); this.state.add('boot', Boot, false); this.state.add('preloader', Preloader, false); this.state.add('sector', Sector, false); this.state.start('boot'); } }

In documentation Phaser.Sprite writen: By default Sprites won't add themselves to any physics system and their physics body will be null. To enable them for physics you need to call game.physics.enable(sprite, system) where sprite is this object and system is the Physics system you want to use to manage this body. Once enabled you can access all physics related properties via Sprite.body

this.scale.forceOrientation(false, false);

bower_components\phaser-official\build\phaser.d.ts ...class ScaleManager { constructor(game: Phaser.Game, width: number, height: number); static EXACT_FIT: number; static NO_SCALE: number; static SHOW_ALL: number; static NO_BORDER: number;...And index.html: <!doctype html><html><head> <meta charset="utf-8"> <title>slash-system</title> <!-- build:css main.min.css --> <link rel="stylesheet" href="css/main.css"> <!-- /build --> <script src="bower_components/jquery/dist/jquery.js"></script></head><body> <div id="game"></div> <div id="orientation"></div> <!-- build:js main.min.js --> <script src="bower_components/phaser-official/build/phaser.js"></script> <script src="js/ScaleManager2.js"></script> <script src="js/atom.js"></script> <script src="js/natom.js"></script> <script src="js/boot.js"></script> <script src="js/preloader.js"></script> <script src="js/sector.js"></script> <script src="js/game.js"></script> <script src="js/app.js"></script> <!-- /build --></body></html>

Your solution already coded in my post in typescript.

Hello, This may be a problem with the keyboard, when you can not pinch keys width adjacent contacts. Write links to examples and what two keys do not work.

app.ts game.ts boot.ts preloader.ts I see no reason to post menu and levels.

It's may be good start point for you. app.ts game.ts boot.ts preloader.ts I see no reason to post menu and levels.