8Observer8

Members
 View Profile  See their activity

  • Content Count

    337

  • Joined

  • Last visited

  • Days Won

    1

8Observer8 last won the day on March 12

8Observer8 had the most liked content!

Community Reputation

37 Excellent

See reputation activity

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. 8Observer8
    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.    8Observer8 reacted to a post in a topic: DatTank multiplayer webGL game!
  3. 8Observer8
    @ohmed please, give good links on your favorite book (articles, examples) how to avoid a network latency.
  4. 8Observer8
    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.
  5. 8Observer8
    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>
  6. 8Observer8
    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>
  7.    8Observer8 reacted to a post in a topic: Coding challenges for future game developers
  8. 8Observer8 started following Most performant web game - Unity vs Phaser3 Vs Babylon Vs...?, Coding challenges for future game developers, Top-Down Tank Game Showcase and and 1 other
  9. 8Observer8
    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();
  10. 8Observer8
    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.
  11. 8Observer8
    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
  12. 8Observer8
    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.
  13. 8Observer8

    SAY HI

    8Observer8 replied to Fiona Goode's topic in General Talk

    It is not polite question.
  14. 8Observer8
    I will publish on two Playgrounds: Plunker and CodeSandbox. If one is dead another will be available. 3. Sprite From Image: Plunker, CodeSandbox
  15. 8Observer8
    This is the first example from the book "Discover Phaser" in TypeScript and Phaser 3: Playground
  16. 8Observer8

    SAY HI

    8Observer8 replied to Fiona Goode's topic in General Talk

    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!
  17.    8Observer8 reacted to a post in a topic: How many webworkers to create?
  18.    8Observer8 reacted to a post in a topic: How many webworkers to create?
  19. 8Observer8
    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
  20. 8Observer8
    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.