miltoncandelero / pixi-hotwire Goto Github PK
View Code? Open in Web Editor NEWTemplate for PixiJS using Typescript and Webpack https://stackblitz.com/github/miltoncandelero/pixi-hotwire
Template for PixiJS using Typescript and Webpack https://stackblitz.com/github/miltoncandelero/pixi-hotwire
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:
....
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.