From f4e29837beecc9ada25cf1fadcd117b8763eb2ab Mon Sep 17 00:00:00 2001 From: Milton Candelero Date: Wed, 28 Feb 2024 15:19:36 -0300 Subject: [PATCH] fix: add canvas type to Application constructor --- source/includes/_01-getting-started.md | 2 +- source/includes/_02-putting-stuff-on-screen.md | 2 +- source/includes/_04-splitting-code.md | 2 +- source/includes/_11-recipes-manager.md | 2 +- source/includes/_12-recipes-resize.md | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/source/includes/_01-getting-started.md b/source/includes/_01-getting-started.md index 718b925..25e58c1 100644 --- a/source/includes/_01-getting-started.md +++ b/source/includes/_01-getting-started.md @@ -63,7 +63,7 @@ Try hitting F12 and finding the Javascript Console. That will be your best frien ```ts import { Application, Sprite } from 'pixi.js' -const app = new Application({ +const app = new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resolution: window.devicePixelRatio || 1, autoDensity: true, diff --git a/source/includes/_02-putting-stuff-on-screen.md b/source/includes/_02-putting-stuff-on-screen.md index 951a48e..ab2faf4 100644 --- a/source/includes/_02-putting-stuff-on-screen.md +++ b/source/includes/_02-putting-stuff-on-screen.md @@ -17,7 +17,7 @@ Finally, we have the root of everything, the granddaddy of them all, the greates ```ts import { Application, Sprite, Container } from 'pixi.js' -const app = new Application({ +const app = new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resolution: window.devicePixelRatio || 1, autoDensity: true, diff --git a/source/includes/_04-splitting-code.md b/source/includes/_04-splitting-code.md index 789ab07..d6ae8fc 100644 --- a/source/includes/_04-splitting-code.md +++ b/source/includes/_04-splitting-code.md @@ -49,7 +49,7 @@ See how I passed the screen size as a parameter to the constructor and stored it import { Application } from 'pixi.js' import { Scene } from './scenes/Scene'; // This is the import statement -const app = new Application({ +const app = new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resolution: window.devicePixelRatio || 1, autoDensity: true, diff --git a/source/includes/_11-recipes-manager.md b/source/includes/_11-recipes-manager.md index c6c71b3..7ab1546 100644 --- a/source/includes/_11-recipes-manager.md +++ b/source/includes/_11-recipes-manager.md @@ -40,7 +40,7 @@ export class Manager { Manager._height = height; // Create our pixi app - Manager.app = new Application({ + Manager.app = new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resolution: window.devicePixelRatio || 1, autoDensity: true, diff --git a/source/includes/_12-recipes-resize.md b/source/includes/_12-recipes-resize.md index 91c3918..e244f75 100644 --- a/source/includes/_12-recipes-resize.md +++ b/source/includes/_12-recipes-resize.md @@ -42,7 +42,7 @@ export class Manager { Manager._width = width; Manager._height = height; - Manager.app = new Application({ + Manager.app = new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resolution: window.devicePixelRatio || 1, autoDensity: true, @@ -121,7 +121,7 @@ export class Manager { public static initialize(background: number): void { - Manager.app = new Application({ + Manager.app = new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resizeTo: window, // This line here handles the actual resize! resolution: window.devicePixelRatio || 1, @@ -168,7 +168,7 @@ You might realize that we no longer have `width` and `height` variables but inst ## Resolution (Device Pixel Ratio) ```ts -new Application({ +new Application({ view: document.getElementById("pixi-canvas") as HTMLCanvasElement, resolution: window.devicePixelRatio || 1, // This bad boy right here... autoDensity: true, // and his friend