Jump to content

Typescript + pixi + other libraries[BEST WAY]


Recommended Posts


In the old days you remember Flash/AS3. There were free Flashdevelop IDE. It was perfect. You use all libraries in flash with perfect auto-completion, perfect debuging and so on.

When flash is old and grumpy now every work with it is stopped of course.

The perfect substituent of AS3 + Flashdevelop IDE we explored is Typescript + PIXI + Webstorm + Typescript namespaces - okay.

But typescript + webstorm are made for angular applications so you understand there is bunch of problems.

We were under pressure and had to create everything fast. Now we have time to explore for the best solution.

Big games/applications can be made of pure javascript and it is trash - our opinion and experience.

Can you tell your opinions, your experience, best practices and so on on Typescript, PIXI , IDE, other libraries and so on ?

Lets make better code! 

Link to comment
Share on other sites

Quick copy-paste from our Tech Stack document. :) Hope this helps, and feel free to ask any questions in the areas, which are of interest. 

JS Libraries

Sound support (web audio, html audio tag fallback)
Tweens (we do not use Greensock/GSAP due to license restrictions)

Dev Tools

  • Our IDE of choice
  • Great typescript support, autocomplete
  • Reasonably good refactoring
  • Free
  • Build texture atlases (spritesheets) from individual sprite PNGs, provided by artist
  • Convert WAV from sound engineer to MP3 sound files (we use MP3 as patents seem to expire around the world, and it is the easiest/widely supported format)

Build Tools

  • Code for our games
  • Our build is based on nodejs
(included with nodejs)
  • Handle dependencies to third-party modules (PIXI, Howler, etc)
  • We develop custom build tools as “npm run” scripts (javascript files, located in tools/build project folder)
  • shelljs provides crossplaform cd, rm, mkdir, etc
webpack 2.0
  • Support ES6 modules
  • Build single minified javascript file from typescript sources and non-JS modules (JSON, images, spritesheets, sounds)
  • However, we DO NOT use webpack for everything. We package static assets, upload to server with shelljs-based build tools. 
  • Our private projects/modules are Mercurial repositories at bitbucket.com [this is for historical reasons, I am not sure 
    there are good reasons not to use git in 2018]
  • Enforce coding style of our choice
putty/pagent (windows)
  • Our upload scripts expect on Windows that SSH keys to our webserver are stored with pagent (in memory)
Link to comment
Share on other sites

Amazing answer! Thanks! After we form our end solution we will put ourselves here I hope!

For the protocol - before 2 years we chose Webstorm cuz that was the only IDE that can debug in browser with the JetBrains chrome extension. It works very beautiful in this way. Now VSCode has plugin for chrome debugging. 

Link to comment
Share on other sites

  • 4 weeks later...

setup unit tests for game based on Pixi + typescript + webpack?

Thing that worked best for me so far is mochajs running in browser window: https://mochajs.org/#running-mocha-in-the-browser

This way, on dev machine one can simply open tests.html.

On CI server the challenge then is to run this HTML page and capture bugs. 

My approach is to do that with Selenium (which is quite easy nowadays with docker images https://github.com/SeleniumHQ/docker-selenium). This way you'll also get integration smoke test.

Other things to consider:

1) If you don't want to test any PIXI visual aspects, then just running mochajs test with any node-based runner works just fine. 

2) https://github.com/GoogleChrome/puppeteer is more lightweight than Selenium, but making it work in docker env might be quite a pain. 

3) You may check how PIXI does their unit testing. AFAIR they have some Electron-based framework for that. 

Link to comment
Share on other sites

On 9/8/2018 at 6:31 PM, Taras said:

Has any body experience with setup unit tests for game based on Pixi + typescript + webpack?
Some examples, seed projects, tutorials?

I used mocha. But with namespaces, not with modules in typescript. Yes the problem is in your tsconfig. There are tutorials for that in the net, Im sure. 
And when you are in the browser why using typescript modules ?
Next week maybe I will ask friend that played on webpack, ts modules, unit tests and etc over PIXI and typescript and we will post some answer here.

Link to comment
Share on other sites

46 minutes ago, jinzo7 said:

And when you are in the browser why using typescript modules ?

0) Because this is what Typescript recommends. https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html . Now that "import" is part of ECMA script, this is recommended approach for the future projects. Surprisingly, this even works in all major modern browsers, so some of our customers' project are conditionally loading ES6 code in newer browsers and old ES3/5 code on older ones. 

1) You can manage versioned third-party libs with NPM or Yarn. This was in fact #1 reason for me to make a switch. 

2) Modules are more powerful than /// comments + namespaces. It is just much easier to encapsulate things with zero global pollution this way. 

3) Most of major libraries, tools and actual games I've seen at various companies are built like that. You are at slightly advantageous position if your code is built like that and you know this stack. :)

4) Webpack can make JSON, SVN, images modules. This is quite powerful and convinient to be able to load game designer CSV setup with a simple require/import statement.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...