8Observer8

Show a minimum example of your server and client scripts.

This article is nice: http://buildnewgames.com/real-time-multiplayer/

If you want to know about professional way you can read this book: Build your own 2D Game Engine and Create Great Web Games Using HTML5, JavaScript, and WebGL https://www.apress.com/gp/book/9781484209530

You can read about a game loop here: 2D breakout game using pure JavaScript https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

"indices" array contains indices of vertices. If you use UNSIGNED_SHORT you can 216 numbers. Max index will be 65535. But if you use UNSIGNED_INT the max index will be (232 - 1)= 4294967295. Read the documentation mage about drawElements() parameters: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements

You can draw circles using Math and pure WebGL 1.0. Create circles in one VBO for performance. Read this book: WebGL Programming Guide If you need a lot of vertices you can use Uint32Array for indices: gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW); But you need to call this code in your Init() method: private Init(): void { let uints_for_indices = gl.getExtension("OES_element_index_uint"); if (uints_for_indices === null) { console.log("OES_element_index_uint is not available."); return; } } This extension allows for vertex buffer array indicies to be 32-bit unsigned integers.

Hi, guys! What do you think about my movement: https://next.plnkr.co/edit/Bgf18uHzIkrRw9oW?preview

Packtpub broke links like this: https://www.packtpub.com/code_download/15622

English only! Но иногда можно

I read in this article Real Time Multiplayer in HTML5 that we should to create a fixed physics loop on server and on a client. Server should have high frequency loop for physics and low frequency loop for sending messages to clients. I upload the example from the article on the free Heroku hosting https://battle-world.herokuapp.com/?debug You can run it in two browser windows. Free hosting has limits. If no one runs the application 30 minutes the server will sleep until someone wake up it. To wake up server you need to wait 10-15 seconds.

It is cool but it is very heavy for my laptop: Asus K53SV; 8 GB RAM, i3 2.2 GHertz (2 cores); Intel HD Graphics 3000; Nvidia Geforce GT 540M (1 GB); Windows 10 I tried to run it using Geforce. I run FireFox using Geforce. I see a slide show after 20 seconds and my laptop is very noisily. This is my simple example how to use Radio Buttons with Babylon.js https://8observer8.github.io/babylonjs/radio-button/

I use TS only for myself to create web applications in pure WebGL and Babylon.js for freelance tasks. And I use TS to study how to create my own 2D / 3D game engines with multiplayer using Node.js / socket.io / MySQL with hosting on free Heroku. I am writing my website in TS and Node.js / Express / Handlebars https://ivan8observer8.herokuapp.com/ I want to make websites and web applications with interactive 3D graphics for customers. I study Phaser/TS and Babylon.js/TS for creating simple games for fun. I do not want to write libraries for JS-programmers.

If you try to compile this code on local computer by TSC compiler when you run this command: tsc -p tsconfig.debug.json let output = new Output(); you will get this error: But JS-files will be generated and you will be able to run it. It is the very important that you can see error in the console when you run the command for compilation: tsc -p tsconfig.debug.json

Thanks! I fixed it on Sandbox and on GitHub. I wrote a private constructor because the Output class uses the Singleton pattern. Now one can create more than one instance of the Output class. Source: https://github.com/8Observer8/getting-started-with-pixijs-and-typescriptPlayground: https://next.plnkr.co/edit/2dkQtKRY30nvoYmF?preview export class Output { private _outputElement: HTMLDivElement; private static _instance: Output; private constructor() { } public static get Instance(): Output { if (this._instance === undefined || this._instance === null) { this._instance = new Output(); this._instance.Initialize(); } return this._instance; } /* ... */ }

If you use Pixi with TypeScript maybe my information will be useful for you in the future when you compile to AMD modules. I had a problem with import in TypeScript when I compiled using "module": "AMD". I had the error when I compiled like this: "cannot find pixi.js module". Because "." (dot) int the name does not allow to compile to AMD modules. I solved this problem very easy. I just: renamed the folder "node_modules/pixi.js" to "node_modules/pixijs" replaced in the file "pixi.js.d.ts" this code: declare module "pixi.js" { export = PIXI; } to this: declare module "pixijs" { export = PIXI; } My example with instruction: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript Playground: https://next.plnkr.co/edit/2dkQtKRY30nvoYmF?preview I hope it will help you.