miltoncandelero / pixi-hotwire Goto Github PK

Hi, this is probably very basic (i'm very new to this) but after downloading it's telling me that

Argument of type '{ view: HTMLCanvasElement; resolution: number; autoDensity: boolean; backgroundColor: number; width: number; height: number; }' is not assignable to parameter of type 'IApplicationOptions'. Object literal may only specify known properties, and 'view' does not exist in type 'IApplicationOptions'.ts(2345)

basically the first line of code lol

https://i.imgur.com/MGwnueG.png

What am I doing wrong with typescript...?

I'm new to PixiJS (+TypeScript!), but I'm getting the following error when starting your pixijselementals tutoral, and I wonder if you/someone can assist?

I created a new repo from your pixi-hotwire template (very neat templating feature, didn't realise Github had this!).

I opened the repo in vscode, ran npm install and noticed I had the error...

Could not find a declaration file for module 'pixi.js'. 'C:/git-repos/pixijs-test/node_modules/pixi.js/dist/cjs/pixi.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/pixi.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'pixi.js';`

I also ran npm run start and the sample code loads and runs fine. 👍

So it seems I'm just missing something, which is making TS unhappy (and stopping me from having intelliSense, I presume?) 🤔

Thanks in advance!

Hi!

Well... a readme file would be great!

Hello, I'm going through your guide(https://www.pixijselementals.com/#letterbox-scale) and getting an error

TS2339: Property 'marginBottom' does not exist on type 'ICanvasStyle'.

    Manager.app.view.style.width = `${enlargedWidth}px`;
    Manager.app.view.style.height = `${enlargedHeight}px`;
    Manager.app.view.style.marginLeft = Manager.app.view.style.marginRight = `${horizontalMargin}px`;
    Manager.app.view.style.marginTop = Manager.app.view.style.marginBottom = `${verticalMargin}px`;

view and Manager.app was initialized

        Manager.app = new Application({
        view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
        resolution: window.devicePixelRatio || 1,
        autoDensity: true,
        backgroundColor: background,
        width: width,
        height: height
        });

I think this may be a webpack configuration error, but I did everything clearly consistently and not change anything in the project settings, perhaps this is due to some updates? Why styles don't work?

Hi! Trying to follow your wonderful tutorial. When I download this package on my Mac, and run npm install, then everything goes fine. But when I run npm run build, it initially seems happy, then 5 seconds later I get the following error message:

(node:1439) ExperimentalWarning: The ESM module loader is experimental.
<e> [webpack-dev-middleware] HookWebpackError: Only file and data URLs are supported by the default ESM loader
<e>     at makeWebpackError (/Users/userName/Sync/Programming/PixiJSElementals/pixi-hotwire-master/node_modules/webpack/lib/HookWebpackError.js:48:9)
...

Any idea what is going on?

Hiya,
Q) Do you have any suggestions how to get Breakpoints to work (from the source Typescript .ts files) within this project/node/webpack structure?

Everything works great using the npm run start or build, as suggested. However, I'd really like to get debugging working, as that will be invaluable for anything larger.

I've tried to do it myself (found this link, but alas didn't work).
The closest I have is that I now have a launch.json file...

{
    "version": "0.2.0",
    "configurations": [
        {
            "command": "npm run start",
            "name": "Debug PixiJS",
            "request": "launch",
            "type": "node-terminal"
        }
    ]
}

...which starts the webpack/node server and seems to have debugger attached:

PS C:\git-repos\kings-ransom> npm run start
Debugger attached.

> start
> webpack serve --mode=development

Debugger attached.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1234/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.88:1234/
15 assets
91 modules
webpack 5.72.0 compiled successfully in 4486 ms

However, the breakpoints don't get hit (they show as "Unbound breakpoint") and I think it might be because it's bound to the generated JS, and not linked back to the TS? Dunno.

Either way, would be grateful if you (or anyone) could provide some pointers on how this can be setup.
Thanks in advance!

(P.S. - In case it helps, I'm on Windows with Edge browser, but my understanding is that this should work cross-platform, if done CORRECTLY! 😅)

In my case breakpoints setted inside VS Code were not working (pausing) browser running the app (I am using Chrome on Ubuntu OS).

To fix it I have done next:

1. Updated Pixi to 7.2.4
2. Modified webpack.config in 2 places:

        ....
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
            // This line is VERY important for VS Code debugging to attach properly
            // Tamper with it at your own risks
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        },
        ....
        devtool: argv.mode === 'development' ? 'source-map' : undefined,
        ....

(these changes were grabbed from https://github.com/GuillaumeDesforges/pixijs-typescript-starter )

My VS Code launch.json looks like this:

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Pixi: Chrome",
          "url": "http://localhost:1234",
          "webRoot": "${workspaceFolder}/dist"
      },
      {
          "type": "node",
          "request": "launch",
          "name": "Pixi: Node",
          "outputCapture": "std",
          "program": "./node_modules/.bin/webpack",
          "args": ["serve", "--mode=development"],
      }
  ],
  "compounds": [
      {
          "name": "Pixi: Full",
          "configurations": ["Pixi: Node", "Pixi: Chrome"]
      }
  ]
}

Hope it can help if you encounter same issue.