PIXI.js/Electron example

[lachlan]

Hi -

I've done lots of programming before, but am just getting started with HTML5 game dev. I pushed up my prototype 'Swipe Poker' to itch.io a couple of days back (on https://nerdygentleman.itch.io/swipe-poker - source on https://github.com/lkingsford/swipePokerHtml5).

I want to make a downloadable version now - which by my understanding, means I need to use Electron.

My source currently is structured with a src folder, with ts files, and a build folder with my image, sound and HTML assets. I build it using npm, which uses webpack to create a dist folder with an index.html, a bundle.js, and a folder of assets that I can upload.

Has anybody got any good examples of a project with source available using PIXI.js, possibly webkit, possibly typescript, and electron to be able to have a web/desktop project? I'm happy to spend time digging through other peoples build process, if I knew a good place to start.

[ivan.popelyshev]

no electron, but we have nwjs boilerplates - https://github.com/pixijs/pixi.js/wiki/v5-Boilerplate

 

[jonforum]

ho , i will probably update this template soon with a  easy 100% auto-build without config.
nwjs,react,parcel,babel,pixijs.

For now this projet have a big ugly custom bundler setting i want remove.
The new scripts should look more clean and easy like this
```

  "scripts": {

// auto run after npm i to for localy install nwjs sdk in node_module.

    "postinstall": "cd ./node_modules/nw  &&  npm install --nwjs_build_type=sdk",

// start a simple dev webserver with hot reloading

    "start": "parcel src/index.html",

// start nwjs sdk from node_module and connect to current webservor with hotreload (listen change from parcel hotreaload)

    "start-nw": "nw dist/ --remote-debugging-port=9229",

 

// build production for web with parcel,babel

    "build": "parcel build src/index.html --out-dir build",

// build auto productions for desktop all platforms and architectures + (protect source code nwjc )

    "build-nwjs": "nwbuild --platforms win32,win64,osx32,osx64,linux32,linux64 --buildDir ./build dist"

  },

```
maybe in few day
For electron i dont know, i never use it, but this will probably help you.
https://github.com/shamofu/electron-react-parcel-boilerplate
 

Edited June 17, 2020 by jonforum

[lachlan]

I didn't even know about nwjs. Thank you all for your help! I'll let you know how I go!

[jonforum]

11 hours ago, lachlan said:

I didn't even know about nwjs. Thank you all for your help! I'll let you know how I go!

Electron is the most popular, but there are many who stand out.
https://www.slant.co/topics/3520/versus/~electron_vs_nw-js_vs_sciter

[lachlan]

So - eventually I did go with electron, using electron build. You can see the changes I made to do the port on https://github.com/lkingsford/swipePokerHtml5/pull/2/files.

Once I get Cordova or PhoneGap working, I'll spend some time to make a template

My notes:

• I feel like I'm abusing npm a little, but also not enough. I've got it building on Mac, Windows and Linux, but currently need to use separate computers to do so.
• Watch for those icon size requirements. 
• Don't be afraid to dig through the dir to see where Electron-Builder is putting your assets in the asar file.
• itch.io butler prefers a windows zip to a portable-exe. For now, I'm obliging. The dmg and appimage versions seem to be close enough to a zip for itch to be happy
• Updating pixi.js can result in scary things happening, that require deleting package.lock.json and node-modules

I struggled a lot with the documentation, particularly for Electron Build. I feel a little like my project hacked together more than well thought out, which always makes me a little nervous.

But hey - it works!