Typescript + pixi + other libraries[BEST WAY]

[jinzo7]

Hello,guys!

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! 

[sbat]

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

Tool	URL	Usage
howlerjs	https://howlerjs.com/	Sound support (web audio, html audio tag fallback)
pixi	http://www.pixijs.com/	Rendering
tweenjs	http://www.createjs.com/tweenjs	Tweens (we do not use Greensock/GSAP due to license restrictions)

Dev Tools

Tool	URL	Usage
VSCode	https://code.visualstudio.com/	Our IDE of choice Great typescript support, autocomplete Reasonably good refactoring Free
TexturePacker	https://www.codeandweb.com/texturepacker	Build texture atlases (spritesheets) from individual sprite PNGs, provided by artist
ffmpeg	https://www.ffmpeg.org/	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

Tool	URL	Usage
typescript	https://www.typescriptlang.org/	Code for our games
nodejs	https://nodejs.org/en/	Our build is based on nodejs
npm	(included with nodejs)	Handle dependencies to third-party modules (PIXI, Howler, etc)
shelljs	https://github.com/shelljs/shelljs	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	https://webpack.github.io/	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.
Bitbucket/Mercurial	https://bitbucket.org	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]
tslint	https://palantir.github.io/tslint/	Enforce coding style of our choice
putty/pagent (windows)	http://www.putty.org/	Our upload scripts expect on Windows that SSH keys to our webserver are stored with pagent (in memory)

[jinzo7]

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. 

[Taras]

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

[sbat]

Quote

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. 

[Taras]

thanks for answer!

i trying to use jasmine and karma, and PhantomJs as testing browser.

Currently have a lot issues with import Pixi in global scope  I suppose, my webpack/tsconfigs setups not correct, so that why looking to any working examples

[jinzo7]

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.

[sbat]

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.