lachlan

PIXI.js/Electron example

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by jonforum

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.