8Observer8

Members
  • Content Count

    337
  • Joined

  • Last visited

  • Days Won

    1

8Observer8 last won the day on March 12

8Observer8 had the most liked content!

About 8Observer8

  • Rank
    Advanced Member
  • Birthday 03/16/1987

Contact Methods

  • Website URL
    https://8observer8.github.io/

Profile Information

  • Gender
    Male
  • Location
    Saratov, Russia
  • Interests
    Babylon.js, Three.js, TypeScript, WebGL 1.0, Unity, Phaser, Pixi.js, C#, OpenGL 3.1

Recent Profile Visitors

2927 profile views
  1. Thanks! I found a few links: http://buildnewgames.com/real-time-multiplayer/ demo: https://battle-world.herokuapp.com?debug https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking Cheating: https://www.gabrielgambetta.com/client-server-game-architecture.html Prediction: https://www.gabrielgambetta.com/client-side-prediction-server-reconciliation.html Interpolation: https://www.gabrielgambetta.com/entity-interpolation.html Lag Compensation: https://www.gabrielgambetta.com/lag-compensation.html Live Demo: https://www.gabrielgambetta.com/client-side-prediction-live-demo.html
  2. @ohmed please, give good links on your favorite book (articles, examples) how to avoid a network latency.
  3. I think this challenge can be useful for me. I just think how to make challenges for learning WebGL. For example, draw 5 cube, make a pyramid using cube. The CodeGuppy web site is very good. I found a lot of tutorials that I can translate to TypeScript/WebGL 1.0 and C#/OpenTK/OpenGL30. I created a few cards on Trello. I will try to solve these 50 tasks from this topic in 3 languages: TypeScript, C# and Python with Unit Tests because I need a practice with TDD (Test-Driven Development). I really like to write Unit Tests. I will create cards for the challenges and repository on GitHub.
  4. Final example in WebGL 1.0 and JavaScript. Textured Rectangle: https://jsfiddle.net/zjydm1ev/ You need run it from local server. I use http-server. Install it using the command: npm i http-server -g And run it in place where the index.html file is: http-server index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Applying a texture to a square</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = ` attribute vec2 a_Position; attribute vec2 a_TexCoord; uniform mat4 u_ModelMatrix; varying vec2 v_TexCoord; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); v_TexCoord = a_TexCoord; }`; var fragmentShaderSource = ` precision mediump float; uniform sampler2D u_Sampler; varying vec2 v_TexCoord; void main() { gl_FragColor = texture2D(u_Sampler, v_TexCoord); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var verticesAndTexCoords = new Float32Array([ -0.5, 0.5, 0.0, 1.0, // (x, y), (u, v) -0.5, -0.5, 0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW); var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT; var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0); gl.enableVertexAttribArray(a_Position); var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord"); gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE); gl.enableVertexAttribArray(a_TexCoord); var image = new Image(); image.onload = function () { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.activeTexture(gl.TEXTURE0); var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } image.crossOrigin = ""; image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg'; </script> </body> </html>
  5. I want to find challenges for practice with WebGL features. If we know how to draw and move a rectangle we can write a lot of simple games like: breakout, snake, tetris and so on. I use the glMatrix library for linear algebra. Colored Rectangle with translation: https://jsfiddle.net/8Observer8/t2q4rmnm/ Just save it in the index.html file and run in browser. It is JavaScript ES5: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Translate a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.635, 0.450, 0.125); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html>
  6. I am not beginner but I know how to make it more hard for me. I will write Unit Tests using Jasmine Framework. I study TDD and this challenge is useful for me. I use TypeScript. 1. Print numbers from 1 to 10. We expect that the array with numbers [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] will be generated. I wrote this unit test first. It is TDD in action. Playground: https://next.plnkr.co/edit/NJHyFVGFXJjCaZSV?preview KataTests.ts import Kata from "../../src/client/Kata"; describe("KataTests", () => { it("GetNumbersFrom1to10_ReturnsNumbersfrom1to10", () => { // Arrange let expectedArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Act let actualArray = Kata.GetNumbersFrom1To10(); // Assert expect(actualArray).toEqual(expectedArray); }); }); Kata.ts export default class Kata { public static GetNumbersFrom1To10(): number[] { return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; } } Program.ts import Kata from "./Kata"; import Output from "./Output"; class Program { public static Main(): void { // Get array let resultArray = Kata.GetNumbersFrom1To10(); // Print array resultArray.forEach((element) => { Output.Instance.Print(element.toString()); }); } } // Debug Version Program.Main(); // Release Version // window.onload = () => Program.Main();
  7. My dream is to make the Battle City game with multiplayer. I will take textures, tiles and some rules from the original games but I need to create right rules for a few teams and coop mode. I think it will be a good practice.
  8. Textured Rectangle in pure WebGL 1.0 and TypeScript. I use glMatrix for Linear Algebra. Playground: Plunker: https://next.plnkr.co/edit/4pnm93F1eWQuvpYg?preview CodeSandbox: https://codesandbox.io/s/textured-rectangle-with-transforms-typescript-s7gfb Source Code on GitHub (see a step-by-step instruction in the README.md file): https://github.com/8Observer8/textured-rect-with-transforms-webgl1-typescript
  9. Add multiplayer to your game. This article are awesome: Real Time Multiplayer in HTML5. The article explains how to use some methods for network latency compensation. I deployed the example from the article on Heroku. You can run it in two browser windows: https://battle-world.herokuapp.com/?debug (It is free hosting and sometimes you need to way a few seconds when server is waking up) The article has links on another good articles about network latency compensation methods. I am rewriting the code example from the article to TypeScript.
  10. It is not polite question.
  11. I will publish on two Playgrounds: Plunker and CodeSandbox. If one is dead another will be available. 3. Sprite From Image: Plunker, CodeSandbox
  12. This is the first example from the book "Discover Phaser" in TypeScript and Phaser 3: Playground
  13. Hi. My name is Ivan. I am 32. I am not newbie but I do not have a big experience. Read books and tutorial, look for and watch video courses, make simple games, have more practice, learn hard, have fun, keep calm. Your are welcome!
  14. I study these frameworks/engines. In edition: Three.js and Pixi.js. You need to write your own little engine to understand how it works, how to write shaders, how to use mathematics and so on
  15. Your own: Build your own 2D Game Engine and Create Great Web Games Using HTML5, JavaScript, and WebGL Authors: Sung, K., Pavleas, J., Arnez, F., Pace, J.