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

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.