jinzo7 Posted August 11, 2018 Share Posted August 11, 2018 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! Quote Link to comment Share on other sites More sharing options...
sbat Posted August 11, 2018 Share Posted August 11, 2018 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) marcioramos and jinzo7 2 Quote Link to comment Share on other sites More sharing options...
jinzo7 Posted August 11, 2018 Author Share Posted August 11, 2018 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. Quote Link to comment Share on other sites More sharing options...
Taras Posted September 8, 2018 Share Posted September 8, 2018 Has any body experience with setup unit tests for game based on Pixi + typescript + webpack? Some examples, seed projects, tutorials? Quote Link to comment Share on other sites More sharing options...
sbat Posted September 9, 2018 Share Posted September 9, 2018 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. Quote Link to comment Share on other sites More sharing options...
Taras Posted September 11, 2018 Share Posted September 11, 2018 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 Quote Link to comment Share on other sites More sharing options...
jinzo7 Posted September 15, 2018 Author Share Posted September 15, 2018 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. Quote Link to comment Share on other sites More sharing options...
sbat Posted September 15, 2018 Share Posted September 15, 2018 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.