Jump to content

Search the Community

Showing results for tags 'typescript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  2. Hi, Our company develop simulations of aircraft systems. We are looking for developers that use Phaser Editor, and has knowledge of Typescript or Javascript and Phaser. Also we will provide you our own framework for developing easier and faster. It's a fully freelance job and we will give you only deadline. Payment method is open to negotiation. You can check our examples here: http://www.flycoglobal.com/B737schematics/ExteriorLightingLocations/ http://www.flycoglobal.com/B737schematics/BleedAirSystem/ http://www.flycoglobal.com/B737schematics/HydraulicPowerDist/
  3. Hi I'm getting black textures when I'm trying to load KTX2 files using loaders.gl and use the UInt8Array to load a texture with from or fromBuffer and create a Pixi sprite with it. It doesn't matter if I make a BaseTexture first or not. Code with BasisLoader & Texture.fromBuffer: import { BasisLoader } from '@loaders.gl/textures'; import { load } from '@loaders.gl/core'; import * as Pixi from 'pixi.js'; ... const loadOptions = { format: 'auto', containerFormat: 'ktx2', module: 'encoder', }; const resources = await load(filename, BasisLoader, loadOptions); const textureData = resources[0][0]; const texture = Pixi.Texture.fromBuffer(textureData.data, textureData.width, textureData.height); const sprite = new Pixi.Sprite(texture); Code with CompressedTextureLoader & Texture.from with BaseTexture: import { CompressedTextureLoader } from '@loaders.gl/textures'; import { load } from '@loaders.gl/core'; import * as Pixi from 'pixi.js'; ... const loadOptions = { useBasis: true, }; const resources = await load(filename, CompressedTextureLoader, loadOptions); const textureData = resources[0]; const baseTexture = new Pixi.BaseTexture( new BufferResource(textureData.data, { width: textureData.width, height: textureData.height, }) ); const texture = Pixi.Texture.from(baseTexture); const sprite = new Pixi.Sprite(texture); Log output: I also tried Pixi's CompressedTextureResource: const baseTexture = new Pixi.BaseTexture( new Pixi.CompressedTextureResource(textureData.data, { format: textureData.format, width: textureData.width, height: textureData.height, }) ); But got this: KTX2 Container is not (yet) implemented into pixi, that is why I had to try other ways to get it loaded into a pixi sprite. I'm not fully understanding all of the compression stuff yet, so I'm probably forgetting something. To be sure you get enough information: I used KTXSoftware's toktx tool to create a KTX2 file from a png: https://github.com/KhronosGroup/KTX-Software I tried these commands and have loaded them all in: ETC1S .\toktx.exe --t2 --encode etc1s --clevel 5 --qlevel 255 book.ktx2 book.png ASTC .\toktx.exe --t2 --encode uastc --uastc_quality 4 book.ktx2 book.png UASTC .\toktx.exe --t2 --encode astc --astc_blk_d 4x4 --astc_quality 100 book.ktx2 book.png So if someone could point me in the right direction, that would be awesome. Thanks in advance!
  4. Hi! I'm new to this forum. I've searched a lot, but couldn't find a way to fix my issue. What I'm trying to do is to override destroy method of the Sprite class. Here's a code, that I use (TypeScript): const destroySprite = Sprite.prototype.destroy; console.log(PIXI.Sprite.prototype, PIXI.Sprite, Sprite.prototype, Sprite, PIXI); Sprite.prototype.destroy = function (options: any) { // doing some extra logic destroySprite.call(this, options); }; But when I debug the application - I see that I can only step into this overridden method from the derived objects (like Text, TilingSprite etc.). Pixi's version in the package.json is: "pixi.js": "^5.3.8", Also I use webpack 5 for modules bundling. I have some suspicion that it may be the source of problems. And there's a result console.log, that I've added to the code snippet above: I would be very thankful if someone could give me an advise on how that issue can be fixed. Thanks in advance.
  5. What physics engines are available for Javascript and/or Typescript? I've searched myself but maybe there's one or two I missed. I also found a post in these forums but that's over two years old now; It's a little disappointing to see that some of them aren't actively developed and lacking a lot of features. I put together a test to compare the different engines I tried - I've attached the files if anyone wants to try it out. Here are the engines I've tried: PhysicsJs http://wellcaffeinated.net/PhysicsJS/ - Incomplete: lacking simple features like constraints - Seems like it was last updated 2 years ago - Possibly the worst performance - Strange API (in my opinion) and difficult to use - Built in mouse interaction behaves strangely MatterJs http://brm.io/matter-js/ - Also incomplete and lacking constraints - Has a built in mouse constraint but it acts strangely - Updated recently - Simple and easy to use - Doesn't handle stress test well p2.js http://schteppe.github.io/p2.js/ - Complete - Updated within the last few months - Doesn't handle stress test well - Easy to use - Good documentation Box2DWeb https://github.com/hecht-software/box2dweb - Complete - everything you would expect from Box2D - Last updated one or two years ago - Semi-poor documentation - you have use the box2d flash documentation which is fairly thorough but slightly outdated - Much faster and a lot more accurate than the above three libraries. Nape http://napephys.com/ - Complete - lots of features - but isn't very active - Has a great marching squares utility which can convert bitmaps into polygons - Good site and documentation - Easy to use but the pooling get/dispose stuff can be a bit confusing - Similar (or maybe even slight better) performance to Box2DWeb and possibly more accurate - Large - minified it's still 1.7MB The one problem with Nape though is that it isn't really meant for Javascript and I had a lot of trouble getting it set up in Typescript. There were some project to convert it to js and generate definition files but I had to modify them a lot to get something complete that worked for me. I also had to manually convert the debug draw classes from as3 to js and Easeljs. Luckily that only needs to be done once - after that I didn't have any problems using it though. I also tried PhysicsType2D (http://physicstype2d.com/) but couldn't get it to work. Overall I was a bit disappointed; In terms of performance, the 'native' js libraries fell short by a lot compared to the two ported ones, and on top of that they lacked a lot of important features. Even the ported ones didn't perform as well as their Flash/As3 versions - the Nape stress test (you can find it here) which I copied, runs significantly better in flash. PhysicsLib.zip UPDATE: You can find the updated github repo here: https://github.com/cmann1/Javascript-Physics-Library-Tests/
  6. Hey all, I’m new here. ? So first, a bit about Golden Hearts Games. ? Golden Hearts Games is the leading innovator of 24/7 digital Charitable Promotional Games. Thus far we’ve processed $7.5+ million in donations, distributed to 44,000+ non-profits from more than 40,000 donors. Golden Hearts Games offers entertainment and rewards to anyone – to all donors and organizations no matter how small. Our mission is to leverage the universal delight in games and prizes to engage and reward everyday small donors – the hard-to-reach lifeblood of philanthropy – while creating new, always-on, highly efficient fundraising channels for causes and charities For more info about GHG, our mission, our team, etc.: https://corp.goldenheartsgames.com/ Secondly, about GHG games: ? We currently serve 10 different games: from Bingo to slots, poker to scratch games. While narrow in our focus currently, we’re looking to broaden our themes and game types in the future. Check out our games: https://goldenheartsgames.com/ Lastly, about the dev role(s): ? We’re seeking experienced Phaser3 software engineers to join our growing team. Full-time roles preferred but willing to work with the right independent game builder. We offer: Medical, dental & vision insurance Unlimited vacation Fully remote Good pay 401(k) For more job details & to apply: https://www.linkedin.com/jobs/view/3013706597/ Join a great team, build games and do some good. We're only just getting started. Cheers, ~CL --- Carl Lindberg Director of Engineering Golden Hearts Games [email protected]
  7. Website Link I have been learning PixiJs for some time now, and recently I wanted to put everything I learned into one small project to deepen my understanding of it. And it happened that I was playing the great game "Night in the Woods", so I decided to make a 2D side-scroller web app with the same feel and look of the game and can be used as the game promotional website. As I said earlier, I am not experienced in Pixi.js, so there has been many obstacles and TONS of refactoring along the way. Initially, I started building the app with vanilla JavaScript, then it became clear that TypeScript would be a much better option. Finding the appropriate project structure proved to be a much harder thing than I thought it would be, and I wished that there was some general structure or "template" online that I could have used as the base for my project. In the beginning, I thought about using a proper game engine ( as Phaser ) instead of the more general purposed rendering engine Pixi.Js, but I continued with it because I wanted to have a deeper understanding about the basics and lower-level stuff, then I may go to a full games engine. It was very hard at times, and many basic features are not implemented ( like multi-animations sprite ), but at the same time it was very informative ( and fun ). I uploaded the project code on Github for anyone interested: Github Repo I would love to hear your feedback and opinions.
  8. Hello All, I am having an issue with loading spritesheets. I coded up an example that works great in code sandbox but it does not work in my development environment (code is identical). Both are using recent versions of Pixi but the repo version uses Parcel to host. The repo example has a promise error and cannot find the texture. Just not sure where to go from here. Thank you for your time. sandbox https://codesandbox.io/s/pedantic-surf-0kdci repo https://github.com/420visions/spritesheet_issue npm run dev to build example
  9. I am not recruiter. I am 100% dev. location is in Bank, London, UK. full time permanent role 1. At least three years of front-end work experience in game industry. 2. Familiar with PixiJS, Typescript, Javascript, Git, Greensock and NPM 3. Good at team communication and coordination skills, pressure-bearing ability and learning ability Pls feel free to send me message.
  10. Here's a free book for those interested in or looking to start using TypeScript to make Phaser 3 games. It goes through 11 chapters and about 90 pages to make an Infinite Runner game like Jetpack Joyride. It is intended for those slightly more advanced than beginner. I also wrote the free Infinite Jumper in Phaser 3 with Modern JavaScript book that is geared towards beginners! TypeScript tends to help add more safety and clarity to your code by default so that you can make bigger and more complex games. We cover things including enums, basic state machine, infinite scrolling, object pools, and more! Learn more and get the book here: https://ourcade.co/books/infinite-runner-phaser3
  11. My example shows how to use Planck.js with TypeScript in Debug and Release modes: hello-planckjs-webgl10-ts You should install these modules globally: npm i typescript -g npm i browserify -g npm i uglify-js -g Install all packages from `package.json` using the command: `npm i` Comment/Uncomment Debug/Release in `index.html` and `main.ts` (see comments in these files). Use these commands to build the example: `npm run debug` - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Planck.js. WebGL 1.0, TypeScript `npm run release` - to bundle in `bundle.min.js` for production Note. See also: Usage of Ammo.js with TypeScript (Ammo.js is a port of Bullet Physics Engine) package.json { "name": "hello-planckjs-webgl10-ts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "debug": "tsc -p tsconfigs/tsconfig.debug.json", "compile": "tsc -p tsconfigs/tsconfig.release.json", "bundle": "browserify public/js/main.js -o public/js/bundle.js", "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js", "release": "npm run compile && npm run bundle && npm run minify" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "gl-matrix": "^3.3.0", "planck-js": "^0.3.23", "requirejs": "^2.3.6" }, "devDependencies": { "@types/requirejs": "^2.1.32" } } public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Planck. WebGL 1.0, TypeScript</title> <!-- Debug --> <script data-main="js/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <!-- Release --> <!-- <script src="js/bundle.min.js"></script> --> </head> <body> <canvas id="renderCanvas" width="300" height="150"></canvas> <div id="output"></div> <a href="https://github.com/8Observer8/hello-planckjs-webgl10-ts">Source Code on GitHub</a> <br> <a href="https://plnkr.co/edit/MyJOyvRtIDAhpKA5?preview">Playground</a> </body> </html> src/client/main.ts import { mat4 } from "gl-matrix"; import { Vec2 } from "planck-js"; let gl: WebGLRenderingContext; let output: HTMLDivElement; function init() { const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; gl = canvas.getContext("webgl"); gl.clearColor(0.2, 0.2, 0.2, 1); gl.clear(gl.COLOR_BUFFER_BIT); output = document.getElementById("output") as HTMLDivElement; const vec = Vec2(1, 2); output.innerHTML = `vec = (${vec.x}, ${vec.y})<br>`; const matrix = mat4.create(); output.innerHTML += `matrix = [${matrix}]`; } function main() { init(); } // Debug main(); // Release // window.onload = () => main(); src/client/RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min", "planck-js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/planck.min" } }); requirejs(["main"], () => { }); tsconfigs/tsconfig.json { "compilerOptions": { "target": "ES5", "outDir": "../public/js" }, "include": [ "../src/client/**/*.ts" ] } tsconfigs/tsconfig.debug.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "AMD", "sourceMap": true, "types": [ "requirejs", "gl-matrix", "planck-js" ], "moduleResolution": "node" } } tsconfigs/tsconfig.release.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "CommonJS", "sourceMap": false, "types": [ "node" ] }, "exclude": [ "../src/client/RequireConfig.ts" ] }
  12. My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-ammojs-webgl10-ts You should install these modules globally: npm i typescript -g npm i browserify -g npm i uglify-js -g Install all packages from `package.json` using the command: `npm i` Comment/Uncomment Debug/Release in `index.html` and `main.ts` (see comments in these files). Use these commands to build the example: `npm run debug` - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Ammo.js. WebGL 1.0, TypeScript `npm run release` - to bundle in `bundle.min.js` for production Note. See alse: Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine) package.json { "name": "hello-ammojs-webgl10-ts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "debug": "tsc -p tsconfigs/tsconfig.debug.json", "compile": "tsc -p tsconfigs/tsconfig.release.json", "bundle": "browserify public/js/main.js -o public/js/bundle.js", "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js", "release": "npm run compile && npm run bundle && npm run minify" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "ammo.js": "github:kripken/ammo.js", "requirejs": "^2.3.6" }, "devDependencies": { "@types/requirejs": "^2.1.32", "ammojs-typed": "^1.0.6" } } public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Ammo. WebGL 1.0, TypeScript</title> <!-- Debug --> <script data-main="js/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <!-- Release --> <!-- <script src="js/bundle.min.js"></script> --> </head> <body> <canvas id="renderCanvas" width="300" height="150"></canvas> <div id="output"></div> <a href="https://github.com/8Observer8/hello-ammojs-webgl10-ts">Source Code on GitHub</a> <br> <a href="https://plnkr.co/edit/6KQT9VQHWvswY3cc?preview">Playground</a> </body> </html> src/client/main.ts import { mat4 } from "gl-matrix"; import AmmoModule from "ammojs-typed"; let Ammo: typeof AmmoModule; let gl: WebGLRenderingContext; let output: HTMLDivElement; function init() { const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; gl = canvas.getContext("webgl"); gl.clearColor(0.2, 0.2, 0.2, 1); gl.clear(gl.COLOR_BUFFER_BIT); output = document.getElementById("output") as HTMLDivElement; const vec = new Ammo.btVector3(1, 2, 3); output.innerHTML = `vec = (${vec.x()}, ${vec.y()}, ${vec.z()})<br>`; const matrix = mat4.create(); output.innerHTML += `matrix = [${matrix}]`; } function main() { AmmoModule().then((api) => { Ammo = api; init(); }); } // Debug main(); // Release // window.onload = () => main(); src/client/RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min", "ammojs-typed": "https://dl.dropboxusercontent.com/s/e5iytx67noqoew7/ammo" } }); requirejs(["main"], () => { }); tsconfigs/tsconfig.json { "compilerOptions": { "target": "ES5", "outDir": "../public/js", "allowSyntheticDefaultImports": true, "esModuleInterop": true }, "include": [ "../src/client/**/*.ts" ] } tsconfigs/tsconfig.debug.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "AMD", "sourceMap": true, "types": [ "requirejs", "gl-matrix", "ammojs-typed" ], "moduleResolution": "node" } } tsconfigs/tsconfig.release.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "CommonJS", "sourceMap": false, "types": [ "node" ] }, "exclude": [ "../src/client/RequireConfig.ts" ] }
  13. Introduction I am a big fan of strongly typed programming languages, and a big fan of Phaser. So TypeScript was a no brainer for me. The thing about TypeScript and phaser for me was a bit of a learning curve in terms of project setup and configuration. The last thing I was using was a combination of gulp, browserify, watchify, and uglify. Plus, setting up a nodeJS server, in order to boot phaser in localhost, and furthermore, run the server in a cloud service, in my case, I used Heroku. This can be a little bit of a turn off for most users who just want to start building video games. This was not my case particularly, but I indeed wanted to get to a point of writing the least amount of code as possible for setting up a project. Even more if I'm just prototyping. The solution for all of the above, is ParcelJS. Installation First of all, of course you will need to install Node.js from https://nodejs.org/en/download/ or from your system's package manager. After that you will need to install the TypeScript and Parcel packages globally through npm. npm install -g typescript parcel-bundler Then we can create a folder for our project and initialize a node project mkdir MyNewGame cd MyNewGame npm init -y At this point we need to install the packages at project level npm install --save phaser npm install --save-dev typescript parcel-bundler Now we can fire up our text editor, in my case I'm using Visual Studio Code. I find it really lightweight, customizable and robust. code . Now we'll create a folder called 'src' and add two files to it: main.ts and index.html In main.ts we'll create an instance of a Phaser game, with it's config. import * as Phaser from "phaser"; const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, width: 800, height: 600, }; let game = new Phaser.Game(config); Then at index.html we'll add a basic html structure, and add a script tag with a source pointing directly to the main.ts file. Yes! We do not need to transpile the .ts file to .js! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My New Game</title> </head> <body> <script src="main.ts"></script> </body> </html> And believe it or not. You only have to go back to your terminal and point parcel to the index.html file. parcel .\src\index.html You should get the following response in your console If we open a web browser and access the localhost at the port printed in your console. We can see the Phaser black canvas rendered on the page. And if you open the developer tools you'll see Phaser 3 running, and no errors in the console. Just to have something to display on the screen we can add a quick text like so Create a new folder inside src called scenes, and create a new file called mainScene.ts export class MainScene extends Phaser.Scene { constructor() { super({ key: "MainScene" }); } create() { this.add.text(220, 150, "TITLE SCREEN", { fontSize: "48px", color: "red" }); } } Then modify your main.ts file config to use this new MainScene class import * as Phaser from "phaser"; import { MainScene } from "./scenes/mainScene"; const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, width: 800, height: 600, scene: MainScene }; let game = new Phaser.Game(config); Now you only have to save both files and parcel will detect the changes, re-transpile and re-bundle everything, and even refresh your browser. That's it for this first part. Covering mostly setup. For the next parts I will explore an easy approach to multiplayer online with Google Firebase, with zero server-side code, and automatic deployment alongside source control in GitHub. I really hope this is helpful for anyone, I would love to hear about your experience with bundlers, and what are your recipes of choice, and if you find this to be a good choice Take care everyone!
  14. Project `visual ts game engine` Tutorial Basic - Sprite animation (SpriteTextureComponent) Screenshot: SpriteTextureComponent class extends TextureComponent It means that we can easy use tiles on sprite animation. Scales is also interest parameter. Use if you want the textures to be larger/smaller than the physical body. sprite: { xScale: 2, // or smaller 0.2 yScale: 2, // or smaller 0.2 }, Demo code: /** * @description * I use images from add-element folder. * This is demo but for real release this * is bad praticle. */ class DemoSpriteAnimation { public gameName: string = "Demo 1 - Add sprite object"; public version: number = 1.0; public playerCategory = 0x0002; public staticCategory = 0x0004; public starter: Starter; public myFirstGamePlayObject: Matter.Body | any = undefined; constructor(starter: Starter) { this.starter = starter; } public attachAppEvents() { const root = this; console.log("App running ..."); // spriteOptions is just demostration not official engine interface. let spriteOptions = { delay: 1, pos: { x: 100, y: 200, }, tile: { x: 1, y: 1, }, }; root.createMySprite(spriteOptions); spriteOptions = { delay: 10, pos: { x: 400, y: 200, }, tile: { x: 1, y: 1, }, }; root.createMySprite(spriteOptions); spriteOptions = { delay: 30, pos: { x: 700, y: 200, }, tile: { x: 5, y: 5, }, }; root.createMySprite(spriteOptions); root.addGround(); } public addGround() { const newStaticElement: worldElement = Matter.Bodies.rectangle(400, 550, 1000, 90, { isStatic: true, isSleeping: false, label: "ground", collisionFilter: { group: this.staticCategory, } as any, render: { visualComponent: new TextureComponent("imgGround", [require("../add-element/imgs/backgrounds/wall3.png")]), sprite: { olala: true, }, } as any | Matter.IBodyRenderOptions, }); (newStaticElement.render as any).visualComponent.setVerticalTiles(4) // setHorizontalTiles(1); this.starter.AddNewBodies([newStaticElement] as worldElement); } /** * @description How to create sprite * with different options */ public createMySprite(spriteOptions: any) { const playerRadius = 50; // tslint:disable-next-line:prefer-const let myObject = Matter.Bodies.circle( spriteOptions.pos.x, spriteOptions.pos.y, playerRadius, { label: "mySprite", density: 0.0005, friction: 0.01, frictionAir: 0.06, restitution: 0.3, ground: true, jumpCD: 0, portal: -1, collisionFilter: { category: this.playerCategory, } as any, render: { visualComponent: new SpriteTextureComponent( "explosion", require("../add-element/imgs/explosion/explosion.png"), ({ byX: 4, byY: 4 } as any), ), fillStyle: "blue", sprite: { xScale: 1, yScale: 1, }, } as any, } as Matter.IBodyDefinition); myObject.collisionFilter.group = -1; this.starter.AddNewBodies(myObject as worldElement); (myObject as any).render.visualComponent.seqFrameX.setDelay(spriteOptions.delay); (myObject.render as any).visualComponent.setVerticalTiles(spriteOptions.tile.x). setHorizontalTiles(spriteOptions.tile.y); (myObject.render as any).visualComponent.keepAspectRatio = true; console.info("my sprite body created from 'dead'."); } protected destroyGamePlayPlatformer() { this.starter.destroyGamePlay(); this.starter.deattachMatterEvents(); } } export default DemoSpriteAnimation; Project link -> https://github.com/zlatnaspirala/visual-ts-game-engine
  15. At Starloop Studios we are looking for a Phaser Game Developer freelance ready to make our clients’ wishes and our team’s ideas come true!Come on board and get ready to create some of the most kick-ass games ever! Minimum Requirements **************************************************************************************************** - Extensive knowledge in Phaser development.- Working knowledge of the Phaser game development engine and the ability to quickly get up to speed with any related tools.- Experience in creating exciting, highly interactive experiences on the desktop, iPad, iPhone and other mobile devices.- Proven resourcefulness in troubleshooting complex problems.- Experience coding for mobile web using responsive web technologies as well as Typescript knowledge.- Strong debugging and optimization abilities.- Good English oral and written communication skills- Good positive attitude and outlook, self-motivated, and a great team-player.- Good communication and problem-solving skills.- Have a proactive work ethic Project Details: Ongoing relation for multiple projects, recurrent dedication. Long term projects (+6months) A good working environment within a group of motivated colleagues Flexible schedule Horizontal and agile organization Remote work To apply for this opportunity, please send your resume and a cover letter and salary expectations to [email protected].
  16. Hi, I am trying to format a specific part of a Phaser.Text object as a superscript. I am using TypeScript in the project. For example: var question: Phaser.Text = this.add.text(0, 0, "3x2", { font: "24px Arial", fill: "#000", align: "center" });Looks like: 3x2 But I want it to look like: 3x2 Unfortunately String.prototype.sup() is depreciated. How would I get this result? I know I can use the <sup> tag, but am not sure how to use this in a Phaser.Text object. Thank you.
  17. I made a game in a week for a game jam with Phaser 3 and React: itch.io's page: https://ldd.itch.io/re-wand Youtube let's play (not by me):
  18. Hi, I am having issue to use pixi.js 5.3 using typescript. It will work fine using pure js but once I try to implement it in typescript, it will not work saving "Cannot find module" I digged through the code and for some reason the types are not here at all (it would normally ship with a d.ts) but for some reason it doesn't show. So I downloaded the repo file but each time I will try to run the Types npm script command it will throw an error and not work at all. here's the stack error file. Also yes I did npm install to make sure everything's was installed. I just runned the command 'types' (using VS code built-in task window) 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Users\\nioPC\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'types:legacy' 1 verbose cli ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'pretypes:legacy', 'types:legacy', 'posttypes:legacy' ] 5 info lifecycle pixi.js-monorepo@~pretypes:legacy: pixi.js-monorepo@ 6 info lifecycle pixi.js-monorepo@~types:legacy: pixi.js-monorepo@ 7 verbose lifecycle pixi.js-monorepo@~types:legacy: unsafe-perm in lifecycle true 8 verbose lifecycle pixi.js-monorepo@~types:legacy: PATH: C:\Users\nioPC\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\nioPC\PIXI_COmpile\pixi.js\node_modules\.bin;C:\Users\nioPC\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\nioPC\PIXI_COmpile\pixi.js\node_modules\.bin;C:\Program Files (x86)\Razer Chroma SDK\bin;C:\Program Files\Razer Chroma SDK\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files (x86)\Common Files\Acronis\VirtualFile\;C:\Program Files (x86)\Common Files\Acronis\VirtualFile64\;C:\Program Files (x86)\Common Files\Acronis\FileProtector\;C:\Program Files (x86)\Common Files\Acronis\FileProtector64\;C:\Program Files (x86)\Common Files\Acronis\SnapAPI\;C:\Program Files\Common Files\Autodesk Shared\;C:\Program Files (x86)\Autodesk\Backburner\;C:\Users\nioPC\AppData\Roaming\itch\apps\butler;C:\WINDOWS\system32\config\systemprofile\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\nodejs\;C:\Users\nioPC\AppData\Local\Microsoft\WindowsApps;C:\Users\nioPC\AppData\Roaming\itch\apps\butler\butler.exe;C:\Users\nioPC\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\JetBrains\JetBrains Rider 2018.3.1\bin;C:\Users\nioPC\AppData\Local\atom\bin;C:\Users\nioPC\AppData\Local\GitHubDesktop\bin;C:\Users\nioPC\AppData\Local\Microsoft\WindowsApps;C:\Users\nioPC\AppData\Roaming\npm 9 verbose lifecycle pixi.js-monorepo@~types:legacy: CWD: C:\Users\nioPC\PIXI_COmpile\pixi.js 10 silly lifecycle pixi.js-monorepo@~types:legacy: Args: [ 10 silly lifecycle '/d /s /c', 10 silly lifecycle 'mkdirp dist/types && jsdoc -c types/jsdoc-legacy.conf.json && node types/assemble pixi.js-legacy' 10 silly lifecycle ] 11 silly lifecycle pixi.js-monorepo@~types:legacy: Returned: code: 1 signal: null 12 info lifecycle pixi.js-monorepo@~types:legacy: Failed to exec types:legacy script 13 verbose stack Error: pixi.js-monorepo@ types:legacy: `mkdirp dist/types && jsdoc -c types/jsdoc-legacy.conf.json && node types/assemble pixi.js-legacy` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (C:\Users\nioPC\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:315:20) 13 verbose stack at ChildProcess.<anonymous> (C:\Users\nioPC\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:315:20) 13 verbose stack at maybeClose (internal/child_process.js:1051:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5) 14 verbose pkgid pixi.js-monorepo@ 15 verbose cwd C:\Users\nioPC\PIXI_COmpile\pixi.js 16 verbose Windows_NT 10.0.18362 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\nioPC\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "types:legacy" 18 verbose node v14.4.0 19 verbose npm v6.14.5 20 error code ELIFECYCLE 21 error errno 1 22 error pixi.js-monorepo@ types:legacy: `mkdirp dist/types && jsdoc -c types/jsdoc-legacy.conf.json && node types/assemble pixi.js-legacy` 22 error Exit status 1 23 error Failed at the pixi.js-monorepo@ types:legacy script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ] I would love to have a answer back to to this since it really slow me down on developing. all regards nio kasgami
  19. EDITED: This problem is solved. The solution is in this message. Hello, Require.js does not understand '.' (dot) in the module name: "pixi.js". Here in the RequireConfig.ts file: RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min" } }); requirejs(["Program"], () => { }); I changed "pixi.js" to "pixijs" in this file: "node_modules\pixi.js\pixi.js.d.ts" here: declare module "pixijs" { export = PIXI; } But now PIXI is undefined in my example: import * as PIXI from "pixijs"; export class Game { public constructor() { const app = new PIXI.Application(); console.log(app); } }
  20. I am re-writing this one... thought it was solved but it is not. There is an typescript mismatch between the Phaser3 ts definitions and a body of Phaser.Physics.Arcade.Body. >body< is only defined as an object. So I get typescript errors for using: onFloor(); onCeiling(); setVelocity; etc. etc. for every method which should be available. This can be found in the docs: 1. I enable physics for the sprite 2. run this in a JS file to disable ts. (tested, working, with all methods) 3. run it in ts, I get an error: That <any body method> is not available in type "object". It's not that certain line, but somewere the track of the physics body definition is broken on typescript. (updated docs, ts, phaser to newest version) /** * If this Game Object is enabled for physics then this property will contain a reference to a Physics Body. */ body: object; I don't know how to address this "bug", since it should be fixed in the live code which is automatically generated by the phaser docs repo. And I am not experienced enough in the build process of the docs. maybe someone can look after this and tell me how to. regards
  21. Hey everyone! I've been a lurker for a while, but joined up to shamelessly plug my new library I built for my own PIXI projects. Hopefully someone else will find it useful too. I wanted an unopinionated way to make isometric tilemaps from sprites of different sizes/depths, one that would play nice with PIXI ? and allow me to be super flexible at runtime without much overhead. Let me know if you have any feedback or find it useful at all! https://github.com/sammccord/iceoh Example page
  22. After a couple of days working with Pixi.js, I've built up a simple boiler plate for the TypeScript language I'm glad to share: https://github.com/yahiko00/PixiProject The game loop with a FPS meter is already implemented. This boiler plate supports source maps, incremental builds, unit tests and browser auto-refresh. Maybe this could be helpful. Feel free to comment. There is certainly a room for improvement. Cheers!
  23. I rewrote the Pong game to WebGL 1.0 and TypeScript from the tutorial: https://noobtuts.com/cpp/2d-pong-game I use a free hosting and sometimes my Node.js/Express server sleeps. Wait 10 second to wake up the server. Run the release version in the browser: http://ivan8observer8.herokuapp.com/webgl10-ts/pong2d-from-noobtuts/ Download the source code: https://github.com/8Observer8/pong2d-from-noobtuts_webgl10-typescript I will find the instruction in README.md file how to build to the Release and Debug versions.
  24. Hi all I have small problem. I have an spritesheet and background music, when i click on my sprite the music should be muted and I want to achieve this by watching variable named musicMuted. So when variable is false then music should play, else not. The problem is that when I change the variable in create function it is not updating i update function (always return false) Codepen below: https://codepen.io/mejs/pen/mdyeGjo
  25. I want to use Browserify with Pixi.js v5, because I want to create a lot of examples for learning and I do not want to use Webpack (Gulp, Grant and so on) because they require a lot of disk space on my laptop. I use TypeScript too. Could you give me a simple project in the archive with a few TypeScript files that allows me to create a bundle for Browser? EDITED: This problem is solved. The solution is in this message
  • Create New...