• Content Count

  • Joined

  • Last visited

  • Days Won


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

Profile Information

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

Recent Profile Visitors

2580 profile views
  1. I made this instruction for Babylon.js, but I hope it will work for Pixi.js too: Debug, Release, Playground using BabylonJS and TypeScript (forum.babylonjs.com) BabylonJS and TS. Debug, Release, Playground (gamedev.net) I will write such instruction for Pixi.js soon.
  2. You installed Pixi.js v5 like this: npm i pixi.js And you installed TypeScript definitions for Pixi.js like this: npm i -D @types/pixi.js But I read here: https://github.com/pixijs/pixi-typescript that it is TypeScript definitions for Pixi.js v4. Theses TypeScript definitions was updated 2 years ago. I think it is possible conflicts. Yes? May be must I write my own TypeScript definitions for Pixi.js v5?
  3. @botmaster I installed Browserify (and TypeScript) globally. Wepack requires about 100 MB. Browserify requires 0 MB.
  4. Now it works. It was a problem on the server side of Plunker. I saw this error:
  5. It is my mistake. I make this only when I upload my projects on forums. Some forums has restrictions on the size of archive. I do not zip my projects on my laptop. Yes, I understand now that I can upload archives on the forums without the "node_modules" folder, because everyone can simple type: npm install It is very complicated for my but I will study it. I need to spend my time (in priority) to learn another thinks (not technical thinks). I spend a lot of time to learn how to run my examples with a few TypeScript files on Sandbox (https://plnkr.co/edit/ is the best for me). I use AMD and RequireJS for this. And I can to run Unit Tests using Jasmine from Sandbox. You can run this very simple example and click on the "Run Unit Tests" button on top left corner. I like write Specs for my examples and I like write Mock-objects for Injection Dependencies using "interface" keyboard from TypeScript (that is similar like in the book "Art of Unit Testing with C# Examples" (I study C# and Unity too). AMD and RequireJS allow me to debug my examples on VSCode (browserify does not allow me it). And I need to create browserify builds using CommonJS modules and Browserify. Thank you for your example. I will have questions later.
  6. I can explain what I want using the example. This example uses Babylon.js, TypeScript and it draws a cube. You can run it on Playground: click to run This is an archive with source code: color-cube_babylonjs-typescript.zip This archive requires only 1.34 MB. If you unzip it you will see that it requires 7.52 MB. It is good because it allows to create a lot of examples for studying and it will not spend a lot of space on my laptop. If you have the browserify and typescript that is installed globally you can bundle the "Program.ts" and "Game.ts" files using this command: npm run release-client The "bundle.min.js" file will be created in the "dist_client" folder. You can just open the "index.html" file in your browser. I use "http-server" module to run examples. I need a similar archive with very simple Pixi.js example that contains a few TypeScript files. My "release-client" command looks like this in the package.json file: "scripts": { "clear": "rmdir /s /q dist_client", "compile-debug-client": "tsc -p tsconfig.debug.client.json", "compile-release-client": "tsc -p tsconfig.release.client.json", "bundle-release-client": "browserify dist_client/Program.js -o dist_client/bundle.client.js", "uglify-release-client": "uglifyjs dist_client/bundle.client.js -o dist_client/bundle.client.min.js", "release-client": "npm run compile-release-client && npm run bundle-release-client && npm run uglify-release-client" },
  7. 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? Please, answer in my theme:
  8. 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?
  9. Thank you. Could you register on Plunker, make a fork, fix the bug and post a link on your fork? I think it will be interesting and useful for you and me.
  10. My example shows a very simple Snake game in TypeScript and pure WebGL. And it shows how to place a TypeScript multi file example on SandBox. If you know how to improve the code let me know. Sandbox: https://plnkr.co/edit/7gjdZi2GNHZvtHQEMc4Y?p=preview
  11. I remade a very simple 2D game to 3D game without engines using WebGL and Blender: https://8observer8.github.io/WebGL/Bitballoon/
  12. WebGL have a very big performance because all calculations are occurred on graphics card processor that get data from graphics card memory. You can compare WebGL with Canvas API. For example, you can write a fragment shader in GLSL that will get every pixel and analyze color with the "if" statement. The fragment shader works very quickly but CanvasRenderingContext2D.getImageData() works very slow. WebGL and GLSL have more possibilities then Canvas API. It is simple to rewrite you WebGL game to OpenGL/C++/C#/Java to have very high performance without browser's restrictions.
  13. Yes, you are right the HTML5 <canvas> element is not available on all devices with old browsers. You should show a message for a user like this: <canvas> Your browser does not support the HTML5 "canvas" element. Please, use a modern browser. </canvas> Check what modern browsers supports WebGL here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2
  14. I could not choose what to study for coding games and I decided to study these tools: Pure WebGL 1.0 and pure WebGL 2.0. I like to study linear math, trigonometry, shader math. I like to study this book which uses pure WebGL and glMatrix: Build your own 2D Game Engine and Create Great Web Games I want to understand how game frameworks works under hood, I mean: Pixi.js, Phaser.js, Three.js, Babylon.js and so on. I like to write very simple clone games like: Snake, Pong, Tetris and so on without game frameworks and game engines. I can use C++ books about OpenGL to study WebGL because WebGL 1.0 is based on OpenGL ES 2.0 (WebGL 2.0 on OpenGL ES 3.0). There are a lot of books and examples in C++ and GLSL that I can translate to WebGL. I can use ThinMatrix video tutorial to study OpenGL using Java and translate his examples to WebGL. I study C# for Unity Game Engine and I write my own simple game engine in C# and OpenGL 3.1 (OpenTK) by rewriting example from this books from deprecated/legacy OpenGL to modern OpenGL: C# Game Programming: For Serious Game Creation This book is a great. It study how to write a good modular architecture and how to develop software using TDD (Test-Driven Development). I like TDD and BDD (Behaviour-Driven Development). I am a fan of these methodologies of software development. I want to rewrite the code from this book to TypeScript/WebGL because TypeScript is very similar to C#. I liked compiled languages like C# and Java. But I study JavaScript 5 (2009) because it is very popular and I will be able to find removed jobs like freelance in the future when I will be a skilled computer graphics and game programmer. Pixi.js and Phaser.js for 2D games. It is very popular frameworks. A lot of works was made. You can write your own shaders in GLSL for these frameworks. Three.js and Babylon.js for 3D games in interactive 3D applications. These are 3D libraries based on WebGL and Canvas API like another popular graphics libraries. You can write shaders for this graphics libraries in GLSL too. Unity Game Engine for 2D and 3D games. I can write WebGL games for Desktop and I can build them for Android, iOS, Desktop (Mac, Window, Linux) to native applications and these native applications will not have browser restrictions. I can write shaders in HLSL and this shader language in very similar to GLSL. I can connect my WebGL, desktop and mobile clients to Node.js server that your Socket.io or WebSockets. For WebGL version I can use pure WebGL frameworks because Unity WebGL build does not work on mobile devices P.S. Sorry for my English. I study it but it is very hard. I did not use Translate Google for writing this message, I wrote this myself.