OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

PixiJS and TypeScript don't work together by default if I downloaded it from pixijs site

  • Thread starter Thread starter oao
  • Start date Start date
O

oao

Guest
Well... Am I asked so silly or so difficult question? Nobody want even advice what I am wrong in. Guys, I stopped on this point and don't understand what the reason. If it because it very much effort to use pixijs+typescript without node modules?

I got an example for pixi+js. And this works fine until I not tried to rehandle it into typescript code. I tried to google it and to copilot it for an answer but they were the unliky tries. Could you help me to fix the code please?

So firstly what a code in js I have:

Code:
import * as PIXI from './pixi/pixi.min.mjs';
(async () =>
{
    const app = new PIXI.Application();
    await app.init({ background: '#1099bb', resizeTo: window });
    document.body.appendChild(app.canvas);
    const container = new PIXI.Container();
    app.stage.addChild(container);
    const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');    
    const bunny = new PIXI.Sprite(texture);
    bunny.x = 25;
    bunny.y = 30;
    container.addChild(bunny);
    container.x = 0;
    container.y = 0;
})();

The structure of the project:

  • pixi-folder with pixi.min.mjs (version 8.1.8, downloaded from pixijs.download/v8.1.8/pixi.min.mjs)
  • out.js
  • index.html with body code:

Code:
<body>    
    <script type="module" src="out.js"></script>
</body>

But when I tried to use TypeScript I catched that I don't know where I am wrong and what to do. I see the appication container in the browser screen with #1099bb color (it's good), no errors in the browser console (it's good too) and no image of my sprite (it's very very bad).

The structure of the project:

  • out folder
  • src folder>app.ts
  • index.html
  • tsconfig.json

Handling project in VSCode + liveserver and building js file by tsc-command

tsconfig.json:

Code:
{
  "compilerOptions": 
  {
    "target": "es5",
    "module": "es6",
    "strict": true,
    "allowJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./out",
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    },
    "lib": ["es2015", "dom"]
  },
  "include": ["src/**/*"]
}

index.html body:

Code:
<body>
    <script type="module" src="out/src/app.js"></script>
</body>

app.ts code:

Code:
import * as PIXI from '../pixi/pixi.min.mjs';
class BunnyApp 
{
    constructor() 
    {
        this.init();
    }
    private async init():Promise<void>
    {
        const app = new PIXI.Application();
        await app.init({ background: '#1099bb', resizeTo: window });       
        document.body.appendChild(app.canvas);
        const container = new PIXI.Container();
        app.stage.addChild(container);
        const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');    
        const bunny = new PIXI.Sprite(texture);
        bunny.x = 25;
        bunny.y = 30;
        container.addChild(bunny);
        container.x = 0;
        container.y = 0;
    }
}
var bunnyApp:BunnyApp = new BunnyApp();

What I checked here that pixi.min.js which will be presented in out>pixi is changed after tsc-compilation. I tried to replace it by default file but without success.

I tried to load npm modules but it is a separate question, I don't want a lot of additional code if I even not understand what I am doing wrong in a simple code. There were some advices to create d.ts file when I tried other iterations of ts-code, but it was when the editor marked red PIXI-entities here and there - but now it's looking ok. I changed pixi-file versions 8.1.6 and 8.1.7 first - same result. I tried other variants of loading assets that copilot advised - perhaps I did something wrong because still no results. I checked that pixi.min.js which will be presented in out>pixi is changed after tsc-compilation. I tried to replace it by default file but without success.

<p>Well... Am I asked so silly or so difficult question? Nobody want even advice what I am wrong in. Guys, I stopped on this point and don't understand what the reason. If it because it very much effort to use pixijs+typescript without node modules?</p>
<p>I got an example for pixi+js. And this works fine until I not tried to rehandle it into typescript code.
I tried to google it and to copilot it for an answer but they were the unliky tries. Could you help me to fix the code please?</p>
<p>So firstly what a code in js I have:</p>
<pre><code>import * as PIXI from './pixi/pixi.min.mjs';
(async () =>
{
const app = new PIXI.Application();
await app.init({ background: '#1099bb', resizeTo: window });
document.body.appendChild(app.canvas);
const container = new PIXI.Container();
app.stage.addChild(container);
const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');
const bunny = new PIXI.Sprite(texture);
bunny.x = 25;
bunny.y = 30;
container.addChild(bunny);
container.x = 0;
container.y = 0;
})();
</code></pre>
<p>The structure of the project:</p>
<ul>
<li>pixi-folder with pixi.min.mjs (version 8.1.8, downloaded from pixijs.download/v8.1.8/pixi.min.mjs)</li>
<li>out.js</li>
<li>index.html with body code:</li>
</ul>
<pre><code><body>
<script type="module" src="out.js"></script>
</body>
</code></pre>
<p>But when I tried to use TypeScript I catched that I don't know where I am wrong and what to do. I see the appication container in the browser screen with #1099bb color (it's good), no errors in the browser console (it's good too) and no image of my sprite (it's very very bad).</p>
<p>The structure of the project:</p>
<ul>
<li>out folder</li>
<li>src folder>app.ts</li>
<li>index.html</li>
<li>tsconfig.json</li>
</ul>
<p>Handling project in VSCode + liveserver and building js file by tsc-command</p>
<p>tsconfig.json:</p>
<pre><code>{
"compilerOptions":
{
"target": "es5",
"module": "es6",
"strict": true,
"allowJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./out",
"baseUrl": "./",
"paths": {
"*": ["src/*"]
},
"lib": ["es2015", "dom"]
},
"include": ["src/**/*"]
}
</code></pre>
<p>index.html body:</p>
<pre><code><body>
<script type="module" src="out/src/app.js"></script>
</body>
</code></pre>
<p>app.ts code:</p>
<pre><code>import * as PIXI from '../pixi/pixi.min.mjs';
class BunnyApp
{
constructor()
{
this.init();
}
private async init():Promise<void>
{
const app = new PIXI.Application();
await app.init({ background: '#1099bb', resizeTo: window });
document.body.appendChild(app.canvas);
const container = new PIXI.Container();
app.stage.addChild(container);
const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');
const bunny = new PIXI.Sprite(texture);
bunny.x = 25;
bunny.y = 30;
container.addChild(bunny);
container.x = 0;
container.y = 0;
}
}
var bunnyApp:BunnyApp = new BunnyApp();
</code></pre>
<p>What I checked here that pixi.min.js which will be presented in out>pixi is changed after tsc-compilation. I tried to replace it by default file but without success.</p>
<p>I tried to load npm modules but it is a separate question, I don't want a lot of additional code if I even not understand what I am doing wrong in a simple code.
There were some advices to create d.ts file when I tried other iterations of ts-code, but it was when the editor marked red PIXI-entities here and there - but now it's looking ok.
I changed pixi-file versions 8.1.6 and 8.1.7 first - same result.
I tried other variants of loading assets that copilot advised - perhaps I did something wrong because still no results.
I checked that pixi.min.js which will be presented in out>pixi is changed after tsc-compilation. I tried to replace it by default file but without success.</p>
 
Top