I have installed a template from below command for my First PIXI Typescript project, as below:
npx create-snowpack-app . --template @snowpack/app-template-blank-typescript --force
Now after installing and clearing its default code. I have installed few more packages as below
package.json as below:
{
"scripts": {
"start": "snowpack dev",
"build": "snowpack build"
},
"dependencies": {
"canvas-confetti": "^1.2.0"
},
"devDependencies": {
"@snowpack/plugin-typescript": "^1.2.1",
"@types/canvas-confetti": "^1.0.0",
"@types/snowpack-env": "^2.3.3",
"pixi.js": "^7.2.4",
"pixijs": "^7.1.4",
"prettier": "^2.2.1",
"snowpack": "^3.3.7",
"typescript": "^4.2.4"
}
}
and in ts file i am just draewing a PIXI Rectangle
public constructor() {
this.app = new PIXI.Application();
this.app.renderer.background.color = 0x23395D;
this.app.renderer.background.alpha = 1;
const rect = new PIXI.Graphics();
rect.beginFill(0xAA33BB)
.drawRect(200, 200, 100, 120)
.endFill();
this.app.stage.addChild(rect);
}
And index.html code is simple, which is as below:
<style>
canvas {
position: absolute;
width: 100%;
height: 100%;
touch-action: none;
cursor: default;
}
</style>
</head>
<body style="margin: 0px">
<canvas id="canvas"></canvas>
But when i run the code then i can found the Graphics in Chrome PIXI tool, But its not showing me at all. I checked the same in Edge Browser as well. So please help me in this.