Jump to content
  • Advertisement

8Observer8

Member
  • Content count

    73
  • Joined

  • Last visited

Community Reputation

162 Neutral

About 8Observer8

  • Rank
    Member

Personal Information

  • Role
    Programmer
  • Interests
    Programming

Social

  • Github
    https://github.com/8Observer8/

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. This is a very good video tutorial for start: Unity Multiplayer Game Development with Node
  2. 8Observer8

    Introduction to THREE.js

    Hi, I rewrote your example in TypeScript. Playground intro-to-threejs.zip Program.ts import { MyScene } from "./MyScene"; export class Program { public static main() { let scene = new MyScene(); scene.Init(); scene.Animate(); } } Program.main(); MyScene.ts import * as THREE from "three"; export class MyScene { private _camera: THREE.PerspectiveCamera; private _scene: THREE.Scene; private _mesh: THREE.Mesh; private _renderer: THREE.WebGLRenderer; public constructor() { this._camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10); this._scene = new THREE.Scene(); let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2); let material = new THREE.MeshNormalMaterial(); this._mesh = new THREE.Mesh(geometry, material); this._renderer = new THREE.WebGLRenderer({ antialias: true }); } public Animate(): void { requestAnimationFrame(() => this.Animate()); this._mesh.rotation.x += 0.01; this._mesh.rotation.y += 0.01; this._renderer.render(this._scene, this._camera); } public Init(): void { this._camera.position.z = 1; this._scene.add(this._mesh); this._renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(this._renderer.domElement); } }
  3. 8Observer8

    How to make a retro game today ?

    -- deleted --
  4. 8Observer8

    How to make a retro game today ?

    If you love C++ and hate C# (or don't want to study another language) you can choose Godot game engine with programming in C++. It is not as heavy as Unreal or CryEngine. I think these engines are overkill for retro games. I didn't try Godot I study Unity.
  5. Tutorial: 2D breakout game using pure JavaScript I rewrite the code to TypeScript -> GitHub Live demo
  6. I wrote a simple example how to use OOP-style for drawing triangle in pure WebGL in Plunker: https://plnkr.co/edit/PkqSZGwhv9zKSnUNSiXo?p=preview I use AMD compilation setting in tsconfig and require.js library. It is cool.
  7. I tried to use it with Gulp and created theme here. I understand what you're talking about. About the complexity of the installation, which is not in JavaScript.
  8. Hi, What do you think about using TypeScript instead of JavaScript for writing code for browser games? I think, it is very similar to C#. What is good about TypeScript for gamedev? What is your opinion? Cheers, Ivan
  9. 8Observer8

    C vs. C++ vs. C# (Beginner)

    You can start with Python. It is a friendly language for beginning. It will be usefull in Future for writing games with PyGame or Panda3D or for writing plugins for Blender, GIMP and Maya. My choice is: C#, JavaScript and Python. C# for Unity JavaScript for writing browser multiplayer games with Node.js/socket.io, Phaser, Pixi.js, WebGL, Babylon.js and Three.js Python for writing plugins for Blender
  10. 8Observer8

    How to start the journey

    I think these are good tutorials for beginning: https://noobtuts.com/unity
  11. 8Observer8

    How to start the journey

    You can start from here: https://unity3d.com/learn/tutorials
  12. 8Observer8

    Let's create WebGL examples for practice

    Drawing a text Live demo + source code: https://plnkr.co/edit/GqmJ4uB5XmNB1Cu7qlhl?p=preview Download the source code: drawing-text.zip Fonts was generated from TrueType and OpenType by Bitmap Font Generator
  13. 8Observer8

    Let's create WebGL examples for practice

    WebGL 2.0. Rotation animation https://jsfiddle.net/8Observer8/fLumroxa/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Rotation animation</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #a8bdc4; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl2"); 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.207, 0.635, 0.125); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.clearColor(0.894, 0.976, 0.886, 1.0); var ANGLE_STEP = 45.0; // Rotation angle (degrees/second) var g_last = Date.now(); var currentAngle = 0.0; var modelMatrix = mat4.create(); var tick = function () { currentAngle = animate(currentAngle); // Update the rotation angle draw(4, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle requestAnimationFrame(tick, canvas); // Request that the browser calls tick }; tick(); function draw(n, currentAngle, modelMatrix, u_ModelMatrix) { mat4.identity(modelMatrix); mat4.rotateZ(modelMatrix, modelMatrix, currentAngle * Math.PI / 180); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); } function animate(angle) { // Calculate the elapsed time var now = Date.now(); var elapsed = now - g_last; g_last = now; // Update the current rotation angle (adjusted by the elapsed time) var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; return newAngle %= 360; } </script> </body> </html>
  14. 8Observer8

    Let's create WebGL examples for practice

    WebGL 1.0. Rotation animation https://jsfiddle.net/8Observer8/gLpowbe2/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Rotation animation</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #a8bdc4; } </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 canvas = document.getElementById("renderCanvas"); var gl = canvas.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.207, 0.635, 0.125); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.clearColor(0.894, 0.976, 0.886, 1.0); var ANGLE_STEP = 45.0; // Rotation angle (degrees/second) var g_last = Date.now(); var currentAngle = 0.0; var modelMatrix = mat4.create(); var tick = function () { currentAngle = animate(currentAngle); // Update the rotation angle draw(4, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle requestAnimationFrame(tick, canvas); // Request that the browser calls tick }; tick(); function draw(n, currentAngle, modelMatrix, u_ModelMatrix) { mat4.identity(modelMatrix); mat4.rotateZ(modelMatrix, modelMatrix, currentAngle * Math.PI / 180); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); } function animate(angle) { // Calculate the elapsed time var now = Date.now(); var elapsed = now - g_last; g_last = now; // Update the current rotation angle (adjusted by the elapsed time) var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; return newAngle %= 360; } </script> </body> </html>
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!