8Observer8

Members
  • Content Count

    266
  • Joined

  • Last visited

About 8Observer8

  • Rank
    Advanced Member
  • Birthday 03/16/1987

Profile Information

  • Gender
    Male
  • Interests
    Babylon.js, Three.js, JavaScript, TypeScript, WebGL 1.0/2.0, Unity, Phaser, Pixi.js

Recent Profile Visitors

2,196 profile views
  1. 8Observer8

    Three.js in TypeScript on Playground

    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 (https://plnkr.co/edit/) And how to use OrbitControl with TS on Playground (It does not work now but I will solve it soon) Check: https://plnkr.co/edit/yICv96E7lTK8xu7DohJB?p=preview OrbitControl with TS works locally: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground 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.
  2. Hello, Please, write your advices how to Learn English. Maybe you know good resources, books and so on. I studied German at school and university. This is my advices. What I use for studying English. I study English 10 years since 2008 (with big interruptions) by myself for free without teachers, schools, and without traveling to English countries. If you have a good internet connection you can study English at home. I advise you to use monolingual dictionaries, for example, Oxford series of dictionaries. I use them a few month. Try to use your native language at minimum. Try to think in English every minute. Use only English Books for studying programming, English and so on. For example, "English Grammar in Use" by Murphy Raymond. Do not watch videos in your native language. Use a lot of sources for studing in English only. Do not chat with people who know your native language. Do not speak with them in Skype. Find friends that do not know your native language. Write on forums and anywhere in English only. Use English everywhere where it possible. Chat and speak in Skype only to people who do not know your native language. Find remote work without people who know your native language. If you have money, study English only with teachers who do not know your native language. Do not afraid mistakes. Practice every minute. And you will see a progress soon. This information for the Slavs who know Russian, and another peaple who know Russian. I use this excelent book for grammar from Comrade Stalin period of Soviet Union (Soviet Union books are great!). It is 8th Edition, 1957: Практическая грамматика английского языка, Ерухим Израилевич, Ксения Качалова Motivational video in English: How to learn any language in six months | Chris Lonsdale | TEDxLingnanUniversity Write in English a lot with a pen every day. It is very effective:
  3. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

    Music and Snowman are scary. Especially if you play at night. I feel that Krampus somewhere near.
  4. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

    I am using Chrome Version 71.0.3578.98 (Official Build) (64-bit) Notebook with a size of a monitor 15' Ok, I will make a screenshot. See:
  5. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

    I did not see the third row of blocks.
  6. 8Observer8

    Best 3d models marketplace?

    @jasonpark2421 You can buy 3D models here: https://assetstore.unity.com/ There are a lot of free assets.
  7. 8Observer8

    Zombie Strike

    Excelent game! Did you make it one? Did you write code only? Where did you get the art, music and sounds?
  8. 8Observer8

    Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)

    But why do you use WebGL for your game?
  9. 8Observer8

    Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)

    All mobile browsers support WebGL 1.0 excepting Opera Mini: https://caniuse.com/#feat=webgl
  10. 8Observer8

    Zombie Strike

    The link does not work.
  11. 8Observer8

    Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)

    Why? I think WebGL is better for performance than Canvas because WebGL works on GPU, not CPU.
  12. 8Observer8

    Find empty position in map

    I have an idea. I made an example on Playground with Unit Tests using Jasmine because I study TDD (Test-Driven Development). We can write a function that will get a 2D map and will return an array of empty points. Lets define: 0 - empty p - player b - bar or obstacle (I thinks that "bar" and "obstacle" are synonyms in English) For example, this is our 2D map: p00000 bbbb00 0p000b bbb000 p00000 We expected that a function will return an array of empty points: (0, 1), (0, 2) and so on. We can generate a random index from the range: [0, cells.length) and use this random index to get an empty cell from cells list: main.js /** * Returns a random integer between min (include) and max (include) */ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function main() { var map = [ ['p', '0'], ['0', 'p'] ]; // Get empty cell list var gameGame = new GameMap(); var emptyCells = gameGame.GetEmptyCells(map); console.log(emptyCells); // output: [ {x: 0, y: 1}, {x: 1, y: 0} ] // Get random cell var index = getRandomInt(0, emptyCells.length - 1); var cell = emptyCells[index]; console.log(cell); // output: {x: 1, y: 0} } window.onload = main; GameMap.js function GameMap() { } GameMap.prototype.GetEmptyCells = function(map) { var emptyCells = []; for (var x = 0; x < map.length; x++) { var row = map[x]; for (var y = 0; y < row.length; y++) { if (row[y] === "0") { emptyCells.push({ x: x, y: y }); } } } return emptyCells; }; SpecRunner.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jasmine Spec Runner v3.3.0</title> <link rel="shortcut icon" type="image/png" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine_favicon.png"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/boot.min.js"></script> <!-- include source files here... --> <script src="src/GameMap.js"></script> <!-- include spec files here... --> <script src="spec/GameMapSpec.js"></script> </head> <body> </body> </html> GameMapSpec.js describe("GameMap", function() { it("GetEmptyMap_ReturnsEmptyMapList", function() { // Arrange var gameMap = new GameMap(); var expectedCells = [ { x: 0, y: 1 }, { x: 0, y: 2 }, { x: 0, y: 3 }, { x: 0, y: 4 }, { x: 0, y: 5 }, { x: 1, y: 4 }, { x: 1, y: 5 }, { x: 2, y: 0 }, { x: 2, y: 2 }, { x: 2, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 3 }, { x: 3, y: 4 }, { x: 3, y: 5 }, { x: 4, y: 1 }, { x: 4, y: 2 }, { x: 4, y: 3 }, { x: 4, y: 4 }, { x: 4, y: 5 }, ]; var map = [ ['p', '0', '0', '0', '0', '0'], ['b', 'b', 'b', 'b', '0', '0'], ['0', 'p', '0', '0', '0', 'b'], ['b', 'b', 'b', '0', '0', '0'], ['p', '0', '0', '0', '0', '0'], ]; // Act var actualCells = gameMap.GetEmptyCells(map); // Assert expect(actualCells).toEqual(expectedCells); }); });
  13. 8Observer8

    Let's create WebGL examples for practice

    Textured Rectangle with Transforms using Webgl2, glMatrix, and TypeScript Playground: https://plnkr.co/edit/OxENcZjrW1SeaGi3ncy9?p=preview Source code: textured-rect-with-transforms-webgl2-typescript.zip index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Textured Rectangle with Transforms using WebGL 2.0, glMatrix, and TypeScript</title> <script data-main="dist/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> </body> </html> style.css #renderCanvas { border: 5px solid #aaaaaa; } Program.ts import { Scene } from "./Scene"; class Program { public static Main(): void { let scene = new Scene("renderCanvas"); } } Program.Main(); RequireConfig.ts requirejs.config({ baseUrl: "dist", paths: { "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min" } }); requirejs(["Program"], (Program) => { }); Scene.ts import { ShaderProgram } from "./ShaderProgram"; import { mat4, vec3 } from "gl-matrix"; export class Scene { private _shaderProgram: ShaderProgram; public constructor(canvasName: string) { this._shaderProgram = new ShaderProgram(canvasName); let gl = this._shaderProgram.GetGL(); this.Init(); } private Init() { 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 ]); let gl = this._shaderProgram.GetGL(); let program = this._shaderProgram.GetProgram(); let vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW); let FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT; let a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0); gl.enableVertexAttribArray(a_Position); let a_TexCoord = gl.getAttribLocation(program, "a_TexCoord"); gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE); gl.enableVertexAttribArray(a_TexCoord); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); let image = new Image(); image.onload = () => { this.OnImageLoaded(image); }; image.crossOrigin = ""; image.src = "https://dl.dropboxusercontent.com/s/nxvziah1a7n9txd/256px-WebGL_Logo.svg.png"; } private OnImageLoaded(image: HTMLImageElement) { let gl = this._shaderProgram.GetGL(); let program = this._shaderProgram.GetProgram(); 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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, 0.5, 0)); mat4.rotateZ(modelMatrix, modelMatrix, 20.0 * Math.PI / 180.0); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1 * 2.0, 1, 1)); 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); } } ShaderProgram.ts export class ShaderProgram { private _gl: WebGLRenderingContext; private _program: WebGLProgram; private _vertexShaderSource = `#version 300 es in vec2 a_Position; in vec2 a_TexCoord; uniform mat4 u_ModelMatrix; out vec2 v_TexCoord; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); v_TexCoord = a_TexCoord; }`; private _fragmentShaderSource = `#version 300 es precision mediump float; uniform sampler2D u_Sampler; in vec2 v_TexCoord; out vec4 fragColor; void main() { fragColor = texture(u_Sampler, v_TexCoord); }`; public constructor(canvasName: string) { let canvas = document.getElementById(canvasName) as HTMLCanvasElement; this._gl = canvas.getContext("webgl2") as WebGLRenderingContext; let gl = this._gl; let vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, this._vertexShaderSource); gl.compileShader(vShader); let fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, this._fragmentShaderSource); gl.compileShader(fShader); this._program = gl.createProgram(); gl.attachShader(this._program, vShader); gl.attachShader(this._program, fShader); gl.linkProgram(this._program); gl.useProgram(this._program); } public GetGL(): WebGLRenderingContext { return this._gl; } public GetProgram(): WebGLProgram { return this._program; } } package.json { "name": "textured-rect-with-transforms-webgl2-typescript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@types/gl-matrix": "^2.4.4", "@types/requirejs": "^2.1.31" } } tsconfig.json { "compilerOptions": { "module": "amd", "sourceMap": true, "outDir": "dist", "target": "es5" }, "exclude": [ "node_modules" ] }
  14. 8Observer8

    Let's create WebGL examples for practice

    Textured Rectangle with Transforms using ES5, WebGL 1.0, glMatrix Playground <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Textured Rectangle with Transforms using WebGL 1.0, ES5</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/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); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); // Allows transperency with textures. gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, 0.5, 0)); mat4.rotateZ(modelMatrix, modelMatrix, 20.0 * Math.PI / 180.0); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1 * 2.0, 1, 1)); 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/nxvziah1a7n9txd/256px-WebGL_Logo.svg.png"; </script> </body> </html>