jinzo7

Typescript + pixi + other libraries[BEST WAY]

Recommended Posts

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! 

Share this post


Link to post
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

Tool
URL
Usage
howlerjs
Sound support (web audio, html audio tag fallback)
pixi
Rendering
tweenjs
Tweens (we do not use Greensock/GSAP due to license restrictions)

Dev Tools

Tool
URL
Usage
VSCode
  • Our IDE of choice
  • Great typescript support, autocomplete
  • Reasonably good refactoring
  • Free
TexturePacker
  • Build texture atlases (spritesheets) from individual sprite PNGs, provided by artist
ffmpeg
  • 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
  • Code for our games
nodejs 
  • Our build is based on nodejs
npm
(included with nodejs)
  • Handle dependencies to third-party modules (PIXI, Howler, etc)
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
  • 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
  • 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
  • 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)

Share this post


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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.