Search the Community

Showing results for tags 'TypeScript'.

More search options

  • 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
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 249 results

  1. 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 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!
  2. 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:
  3. 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 = 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); = -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;"my sprite body created from 'dead'."); } protected destroyGamePlayPlatformer() { this.starter.destroyGamePlay(); this.starter.deattachMatterEvents(); } } export default DemoSpriteAnimation; Project link ->
  4. Project name: VuleTube Alternative YouTube viewer Based on Vue vs Typescript - YouTubeAPI vs Three.js and Node.js First feature: YouTube vs Threejs version 0.2.0 Public access for VuleTube service: I am looking for collaborants who will support this project. Api documentation: DocumentationLink Production use https node application for web server. git clone npm i Other good solution is node serve for instant start. Install web server for dev: For Localhost works npm install -g serve Run: npm run serve Youtube presentation: Project details Project details Features Note: 0.0.x => any changes 0.x.1 ... n => any changes + updated present logic or new big feature. x.1.1 ... n => release git/build point version. - version 0.0.2 [MASTER] Getting response for youtube search. Call server part for saving videos - version 0.0.3 [MASTER] Add options switch-place for two main components Implement LocalStorageMemory class (For saving all user infly data - view options etc.) - version 0.0.4 [MASTER] Save current (exist) options with localStorage and load on refresh. Every next options will be implemented with localStorage support. - version 0.0.5 [MASTER] Added new server module : npm install --save image-downloader Prepare for search result preview in 3d. with raycast options for navigate. Add options for: save result number per page - pagination. show result in 3d version 0.1.1 [WIP NEXT] Adding paypal donate buttons Prevent raycast click event behind 3d plane video FIX@ Adding progress for video duration. Adding webcam options version 0.1.2 [MASTER] Adding paypal donate buttons test nui webcamer controller [DEV] voice commander activate => block detection 0 information/about => block detection 7 switch theme => block detection 3 test nui/voice controller [DEV] Just basic - voice-commander need to be improved. Login proccess need mouse or touch event trigger (on user request). Can't be passed with nui or voice commander. version 0.2.0 [MASTER] - Added new submodule Basic implementation options for first effect gray. My opencv-starter project is script module type and prepared for this actions. - test nui/voice controller pre-command -> action command => v-command : `search` or `search for` then listening for `what to search` . [DONE] - NUI commander visibility option implemented [DONE] - Make more comfor in component class i created declare ts files for each/individual components. `myYouTube.d.ts` and `webgl-player.d.ts` version 0.2.1 [NEXT][WIP] - Make openCV videoProcessing multi source reusable but with one output canvas effect. done on played main video (threejs canvas texture). - Create first documentation for VULETUBE Application. - Prevent raycast click event behind 3d plane video FIX@ [DEV] Project structure: ├── dist/ (This is auto generated) Ignore this ├── docs/ (This is auto generated) ├── node_modules/ (This is auto generated) ├── public/ | ├── assets/ | | └── icons/ | | | └── svgs | | | └── pngs | | └── vule-logo1.png | | └── logo.png | | └── sounds/ | | | └── note.mp3 ... | | └── submodules/ | | | └── nui-commander/ | | | └── voice-commander/ | | | └── opencv-starter/ | ├── thumbnails/ | ├── videos/ | | └── list.html | ├── bad.html | ├── favicon.ico | ├── index.html ├── server/ | ├── node_modules/ (This is auto generated) | ├── package.json | ├── package-lock.json | ├── server-connector.js ├── src/ | ├── components/ | | ├── nui-webcam-control/ | | | ├── nui-webcam-control.vue | | ├── youtube-3d/ | | | ├── myYouTube.vue | | | ├── myYouTube.d.ts | | | ├── webgl-player.vue | | | └── webgl-player.d.ts | | ├── myFooter.vue | | ├── myHeader.vue | ├── my-common/ | ├── local-storage/ | ├── App.vue | └── styles/ | | └── styles.scss | ├── App.vue | ├── main.ts | ├── error-instance.ts | ├── shims-tsx.d.ts | ├── shims-vue.d.ts | └── store.ts ├── .gitignore ├── (This file) ├── tsconfig.json ├── vue.config.js ├── package.json ├── package-lock.json (This is auto generated) └── babel.config.js Components : - myYouTube.vue Getting response for youtube search. Call server part for saving videos - webgl-player.vue Open opengles port view, look for video source saved to the https://maximumroulette:3000 I use quick solution from npm: Response for youtube api v3 call search. body: "{↵ "kind": "youtube#searchListResponse",↵ "etag"" headers: { cache-control: "private", content-encoding: "gzip", content-length: "5512", content-type: "application/json; charset=UTF-8", date: "Sun, 05 Jul 2020 20:47:06 GMT", …} result: { kind: "youtube#searchListResponse", etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38", nextPageToken: "CBkQAA", regionCode: "RS", pageInfo: {…}, …} status: 200 statusText: null Result property: { "kind": "youtube#searchResult", "etag": "mlweRndBtBgAcVC-11ZrL0oI7ok", "id": { "kind": "youtube#video", "videoId": "YPhJOC9-M_M" }, "snippet": { "publishedAt": "2019-07-14T19:27:31Z", "channelId": "UCc1NtMtvoVzKnOtnai9LGsA", "title": "Create game engine - Visual typescript game engine", "description": "Clone or download from : Next video\ developing in live - adding multiplayer feature. Project : Visual ts ...", "thumbnails": { "default": { "url": "", "width": 120, "height": 90 }, "medium": { "url": "", "width": 320, "height": 180 }, "high": { "url": "", "width": 480, "height": 360 } }, "channelTitle": "javascript fanatic", "liveBroadcastContent": "none", "publishTime": "2019-07-14T19:27:31Z" } } { etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38" items: etag: "mlweRndBtBgAcVC-11ZrL0oI7ok" id: {kind: "youtube#video", videoId: "YPhJOC9-M_M"} kind: "youtube#searchResult" snippet: {publis kind: "youtube#searchListResponse" nextPageToken: "CBkQAA" pageInfo: {totalResults: 400229, resultsPerPage: 25} regionCode: "RS" } } VueMaterial help Notes: All other <input type="file"> attributes, such as multiple and accept, can be used on md-field. Icons used with Spiral position Not in use at the moment. var count = 10; var radius = 32; for ( var i = 1, l = count; i <= l; i ++ ) { var phi = Math.acos( - 1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var mesh = new THREE.Mesh( geometry, material ); mesh.position.setFromSphericalCoords( radius, phi, theta ); mesh.lookAt( ); this.scene.add( mesh ); } YT Download module Download from: Help links/public: Direct link for dev server VueTube web service 2020
  5. 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.
  6. I made a game in a week for a game jam with Phaser 3 and React:'s page: Youtube let's play (not by me):
  7. 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
  8. 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 npm@6.14.5 3 info using node@v14.4.0 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
  9. 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": "" } }); 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); } }
  10. 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
  11. 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! Example page
  12. 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: WebGL 2.0: A brief description of what WebGL is, and references to the specifications: Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: ch02/HelloPoint1: ch02/HelloPoint2: ch02/ClickedPoints: ch02/ColoredPoints: Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: ch03/HelloTriangle: ch03/HelloQuad: ch03/HelloQuad_FAN: ch03/HelloTriangle_LINES: ch03/HelloTriangle_LINE_STRIP: ch03/HelloTriangle_LINE_LOOP: ch03/TranslatedTriangle: ch03/RotatedTriangle: ch03/RotatedTriangle_Matrix: ch03/ScaledTriangle_Matrix: Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: ch04/RotatedTranslatedTriangle: ch04/TranslatedRotatedTriangle: ch04/RotatingTriangle: ch04/RotatingTranslatedTriangle: ch04/RotatingTriangle_withButtons: Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: ch05/MultiAttributeSize_Interleaved: ch05/MultiAttributeColor: ch05/ColoredTriangle: ch05/HelloTriangle_FragCoord: ch05/TexturedQuad: ch05/TexturedQuad_Repeat: ch05/TexturedQuad_Clamp_Mirror: ch05/MultiTexture: Chapter 07. Toward the 3D World ch07/LookAtTriangles: ch07/LookAtRotatedTriangles: ch07/LookAtRotatedTriangles_modelViewMatrix: ch07/LookAtTrianglesWithKeys: ch07/OrthoView: ch07/LookAtTrianglesWithKey_ViewVolume: ch07/OrthoView_halfSize: ch07/OrthoView_halfWidth: ch07/PerspectiveView: ch07/PerspectiveView_mvp: ch07/PerspectiveView_mvpMatrix: ch07/DepthBuffer: ch07/Zfighting: ch07/HelloCube: ch07/ColoredCube: ch07/ColoredCube_singleColor: Chapter 08. Lighting Objects ch08/LightedCube: ch08/LightedCube_animation: ch08/LightedCube_ambient: ch08/LightedTranslatedRotatedCube: ch08/PointLightedCube: ch08/PointLightedCube_animation: ch08/PointLightedSphere: ch08/PointLightedSphere_perFragment: ch08/PointLightedCube_perFragment: ch08/LightedCube_perFragment: Chapter 09. Hierarchical Objects ch09/JointModel: ch09/MultiJointModel: ch09/MultiJointModel_segment: Chapter 10. Advanced Techniques ch10/RotateObject: ch10/PickObject: ch10/PickFace: ch10/HUD: ch10/3DoverWeb: ch10/Fog: ch10/Fog_w: ch10/RoundedPoints: ch10/LookAtBlendedTriangles: ch10/BlendedCube: ch10/ProgramObject: ch10/FramebufferObject: ch10/Shadow: ch10/Shadow_highp: ch10/Shadow_highp_sphere: ch10/OBJViewer: ch10/RotatingTriangle_contextLost: Gifts gifts/Particle: gifts/Printf: gifts/SpecularCube: gifts/TextTexture: gifts/ThreeDUI: gifts/Wave: gifts/WorldCoordinateSystem: appendix/CoordinateSystem: Appendix appendix/CoordinateSystem_viewVolume: appendix/LoadShaderFromFiles:
  13. 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: 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!
  14. 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 - 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 - 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 - Complete - Updated within the last few months - Doesn't handle stress test well - Easy to use - Good documentation 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 - 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 ( 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. UPDATE: You can find the updated github repo here:
  15. I rewrote the Pong game to WebGL 1.0 and TypeScript from the tutorial: 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: Download the source code: I will find the instruction in file how to build to the Release and Debug versions.
  16. 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:
  17. Hello, I can teach you using Skype. If you share your screen I can tell you what you need to install and press. I can show you how to: set breakpoints in VSCode in the project with a few files. We will use AMD and RequireJS bundle your source files to use them in Browser. We will use Browserify and UglifyJS compile Node.js server TypeScript scripts connect your server with client that is written in pure WebGL, Phaser, Pixi.js, Three.js or Babylon.js write Jasmine Specs (Unit Tests) for client and server set breakpoints in Jasmine Specs deploy you TypeScript server and client on Heroku connect your project with GitHub to automation deploying after push More about unit tests. I use TypeScript. I will give you my boilerplate for Jasmine and I will show you how to set up it. I will instruct you: How to set breakpoints in TS code in VSCode How to write Mock objects for dependencies that was injected How to build your unit tests in production (in bundle.min.js) I use AMD-build and RequireJS to debug mode (to set breakpoint in VSCode) and I use CommonJS-build and Browserify/UglifyJS to build unit tests to production My time rate is $10 per hour.
  18. I decided to write simple multiplayer games for my portfolio. Maybe my code will be useful for someone. I will write detailed commits on GitHub. Everyone can use my code for free. The Game will be here: Source Code: I use: TypeScript VSCode Free Heroku hosting that are connected with GitHub. My game deployed automatically when I push on GitHub AMD and RequireJS for debug version CommonJS, Browserify, UglifyJS for release version Now my game just shows one "O" object. I will write here about of process of development. You can ask me about my code. Please, report me if you find some errors. Maybe I will take a feedback from how to improve my code. Date: Sat Jun 29 23:35:23 2019 +0400 The server sends JSON message 'Hello from server'. Client display this message on the page.
  19. 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
  20. Hi, i want to pass value from the HTML element to the type script variable , but when i write this.ShowMs(show), it show error of "Property 'ShowMs' does not exist on type 'HTMLElement'. Anyone know what i missing? Below is the code. ping():void{ var intStartTime; intStartTime = +new Date(); var objIMG = new Image(); var show; objIMG.src = this.url + "/" + intStartTime ; objIMG.onload = objIMG.onerror = function() { var delay = Number(new Date()) - Number(intStartTime); show = (delay<1)?("<1"):(" = "+delay); console.log( " Ping" + show + " ms"); this.ShowMs(show); } } ShowMs(passData:any):void{ if(passData < 100){ this.txt.color = "#3FFF00"; this.txt.text = passData; }else if(passData < 300){ this.txt.color = "#C5FF0D"; this.txt.text = passData; }else if(passData > 300){ this.txt.color = "#FF0000"; this.txt.text = passData; }else{ this.txt.color = "#FF0000"; this.txt.text = passData; } }
  21. I made very simple example (just rewrite Getting Started Example) in TypeScript and Three.js without Angular. This example shows: How to compile TS files to AMD modules and load them with Require.js How to place your examples in Playground ( And how to use OrbitControl with TS on Playground (It does not work now but I will solve it soon) Check: OrbitControl with TS works locally: But it does not want to work on Playground. P.S. I will be very glad if someone help me and explain me why OrbitControl works locally but does not work on Playground.
  22. Try my christmas event game. very short, one button game. Press spacebar or mouse/touch to Jump. jump higher when holding button. Goal is this gift bag. You can see ending CG when you get gift bag Thank you for playing.
  23. Hello, I am trying to run official Getting Started Example on Playground with OrbitControls. The first problem was that official OrbitControls is not friendly with TypeScript and I took: But this module does not use AMD by default and I recompiled it to AMD for usage with RequireJS library because I have a few files: Program.ts and Scene.ts and I can run my example on Playground only with AMD compilation. Recompilation requires going in node_modules folder for recompiling module - it is not a common way. I created libs folder in my project and copied content of dist to libs/three-orbitcontrols-ts/ it works localy: I put all files in one directory for usage in Plunker and it works localy: But when I upload the files on Plunker it does not work: You will see the error in a console: Please, help me to solve this problem.
  24. I am still getting errors like: Severity Code Description Project File Line Suppression State Error Build:Expected 0-1 arguments, but got 5. Canada C:\MRM\Canada\Canada\app.ts . I am receiving 10 Errors when trying to build this in VS2015. It is behaving like it is missing a project reference as it doesn't recognize game.load,image and game.add.sprite as well as the number of arguments in Phaser.Game. This behavior is normally tied to missing a .dll or a using in C#. In the initial instructions it says if you are still having errors to add the suggested file to the top of the app.ts file: /// <reference path="phaser.d.ts"/> which I did. I can see in doing research using /// <reference path="phaser.d.ts"/> as a way to add reference is supposed to work. I have downloaded the latest version of phaser.d.ts from Git and still have the issue. Any help would be very much appreciated as I am trying to get started with Phaser3 app.ts
  25. I am setting up the typescript version in VS and noticed when I downloaded version 3.15.1 there was no typesript folder or file "As of Phaser 2 the TypeScript definitions are found in a folder called typescript in the root of the repository. You need to select the phaser.d.ts file from there. If you have an earlier version of Phaser the defs file can be found in the build folder." Does anyone have any ideas on where I can find this file? It also does not exist on GitHub as far as I could see.