Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Search the Community

Showing results for tags 'JavaScript'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Website URL

Twitter

Skype

Location

Interests

Found 688 results

  1. 8Observer8
    Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview GitHub: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js glMatrix is just a bonus: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to set up Box2D-WASM with importmap and Rollup for JavaScript</title> </head> <body> <!-- Since import maps are not yet supported by all browsers, it is necessary to add the polyfill es-module-shims.js Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation --> <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "box2d-wasm": "https://unpkg.com/[email protected]/dist/es/Box2D.js", "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/+esm" } } </script> <script type="module" src="./js/index.js"></script> </body> </html> init-box2d.js import Box2DLib from "box2d-wasm"; export let box2d = null; export function initBox2D() { return new Promise(resolve => { Box2DLib().then((re) => { box2d = re; resolve(); }); }); } index.js import { box2d, initBox2D } from "./init-box2d.js"; import { mat4, glMatrix } from "gl-matrix"; async function init() { await initBox2D(); const { b2Vec2 } = box2d; const vec = new b2Vec2(1, 2); console.log(`vec = (x: ${vec.x}, y: ${vec.y})`); const mat = mat4.create(); console.log(mat); console.log(glMatrix.toRadian(45)); } init(); Instructions for building and running the project in debug and release: - Download and unzip this example: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js - Go to the example folder in the console: `cd how-to-set-up-box2dwasm-with-importmap-rollup-js` - Install these packages globally with the command: > npm i -g http-server rollup uglify-js - Add the Rollup bin folder to the Path. Type this command to know where npm was installed `npm config get prefix`. This command will show you the npm location. You will find the "node_modules" folder there. Go to the "rollup/bin" folder and copy this path, for example for me: `C:\Users\8Observer8\AppData\Roaming\npm\node_modules\rollup\dist\bin`. Add this folder to the path variable. - Run http-server in the project directory: > http-server -c-1 Note. The `-c-1` key allows you to disable caching. - Start development mode with the following command: > npm run dev Note. Rollup will automatically keep track of saving changes to files and build a new index.js file ready for debugging. You can debug your project step by step in the browser by setting breakpoints. - Go to the browser and type the address: localhost:8080/index.html - Create a compressed file ready for publishing. Stop development mode, for example, with this command Ctrl + C in CMD, if it was launched before and enter the command: > npm run release Note. After this command, Rollup will create a compressed index.js file. Compression is done using the uglify-js package.
  2. hektor74
    Hi, Our company develop simulations of aircraft systems. We are looking for developers that use Phaser Editor, and has knowledge of Typescript or Javascript and Phaser. Also we will provide you our own framework for developing easier and faster. It's a fully freelance job and we will give you only deadline. Payment method is open to negotiation. You can check our examples here: http://www.flycoglobal.com/B737schematics/ExteriorLightingLocations/ http://www.flycoglobal.com/B737schematics/BleedAirSystem/ http://www.flycoglobal.com/B737schematics/HydraulicPowerDist/
  3. danielkill
    Hi, my goal is to have a canvas that spans 80% of the users browser and keeps aspect ratio of 16:9. I was trying different approaches throughout today, failing to reach the goal, but here's the idea I came up with that works on paper and in my head, but not in practice. Can anyone see where's the problem in my line of thinking? Conceptually: I pretend I have 1280x720 available and use it to position whatever I want on the canvas, using the 1280x720 coordinates system. Then I find out what screen size I have available and compute following values using following formulas: newWidth = window.innerWidth * 0.8 newHeight = newWidth * (16/9) scaleFactor = newWidth / lastWidth (when this is first called, lastWidth is 1280) In the test environment, I have larger screen than this, so I start with scaleFactor=1.2 and I have two sprite circles, for which I update both coords by sprite.x = sprite.x*scaleFactor equation. For moving the sprites at corresponding scale, this seem to work correctly. Similarly, I thought that doing sprite.set.scale(scaleFactor) or sprite.set.scale(scaleFactor, scaleFactor), will do the job correctly and performed following test: 1. Have it loaded for the first time in big window, with values being properly scaled (success?) 2. Have it loaded in a smaller window by clicking "Restore down" on window control, which scales things down by three times, scale factor 0.3, everything seems legit. 3. Have it loaded back in the big window as in (1), scale factor = 3 (scaling 300% up, as it scaled to 30% before), which works for coordinates, but scale is off (its way bigger, I will attach screens to demonstrate this). Why is 3 happening? // Hopefully minimum viable example of what is going on in my code, with unnecessary/irrelevant parts removed const targetAspectRatio = 16 / 9; const canvasWidthPercentage = 80; const baseWidth = 1280; const baseHeight = 720; let scaleFactor = 1.; const initialWidth = window.innerWidth * (canvasWidthPercentage / 100); const initialHeight = initialWidth / targetAspectRatio; // Keeping track of previous dimensions let lastWidth = baseWidth; let lastHeight = baseHeight; const app = new PIXI.Application({ width: baseWidth, height: baseHeight, resolution: window.devicePixelRatio || 1, }); document.body.appendChild(app.view); /* Here I spawn circles -> redacted from this sample, but attached below */ function resizeHandler() { const newWidth = window.innerWidth * (canvasWidthPercentage / 100); const newHeight = newWidth / targetAspectRatio; scaleFactor = newWidth / lastWidth; // scaleWidth == scaleHeight, due to aspect ratio lock I believe console.table({/* Debug you see in attachments */}) // Update the renderer size app.renderer.resize(newWidth, newHeight); displayedSprites.forEach((sprite) => { sprite.scale.set(scaleFactor) sprite.x = sprite.x * scaleFactor; sprite.y = sprite.y * scaleFactor; console.log("On window resize moved sprite to [x,y]=["+sprite.x+","+sprite.y+"]") }); lastWidth = newWidth; lastHeight = newHeight; } window.addEventListener('resize', resizeHandler); resizeHandler(); Wasn't sure it is relevant, but here's how I spawn those circles: const spawnCircle = (x, y) => { let graphics = new PIXI.Graphics(); graphics.beginFill(0xFF0000); graphics.drawCircle(50, 50, 50); // center coords (x,y) and radius graphics.endFill(); const texture = app.renderer.generateTexture(graphics); const sprite = new PIXI.Sprite(texture); sprite.x = x * scaleFactor; sprite.y = y * scaleFactor; console.log("Spawning a circle at [x,y]=["+sprite.x+","+sprite.y+"]") app.stage.addChild(sprite); displayedSprites.push(sprite); } spawnCircle(150, 100); spawnCircle(150, 300);
  4. JSLegendDev
    Kaboom.js is a recent library for making games. Recently the version 3000 was released (They jumped from version 2000 to 3000, there aren't 3000 versions haha). Anyway, I really like the library. You make games with it by creating game objects by passing a list of components offered by Kaboom.js. Optionally you can create your own components as well. Here is my tutorial which lasts 7 hours where I go in depth on how to make a platformer game with it : Enjoy!
  5. Nikola Lukic
    MATRIX-ENGINE STATUS - [Integrated PWA addToHomePage/cache/] ✔ - [Integrated raycast (hit trigger detect), bvh animation] ✔ - [Basic Physics implementation based on cannon.js] ✔ - [FirstPersonController/SceneController Drag and navigation scene] ✔ - [Basic's Shadows vs lights (GLSL)] ✔ Description ℹ This is small but inspiring project. The benefits of this project is offering an overview of the entire application logic, easy native implementations (hybrid app), object structural. Thanks to Mr.Keestu i use (gl-program-structure) new version of glmatrix (2.0). Push&Pop matrix just like in opengles 1.1. Also can be downgraded to openGLES 1.1. webGL Lightweight library based on glmatrix engine. For multiplayer used webRTC done with io socket. Physics done with last version of cannon.js. I use free software Blender 2.90.1 for 3d Object mesh works. MatrixEngine is Blender frendly orientend lib. Also mixamo.com is great service used for creating my assets. Limitation ⚠ Basic implementation for physics (Cube, Sphere) Raycast not work after walk behind the object in first person mode Only static object cast spot light in right way for now. Need general more improvement on GLSL part. Next Features 🔜 General improvements in Lights section. Shaders must be improved based on work Links -> https://webglfundamentals.org/webgl/lessons/ For npm users recommended Use starter project: https://github.com/zlatnaspirala/matrix-engine-starter with command: npm i npm run build.all Project template in matrix-engine-starter Slot Mashine https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-slot/index.html Live Demos https://maximumroulette.com/apps/matrix-engine/examples-build.html https://maximumroulette.com/apps/matrix-engine/app-build.html https://fps-matrix-engine.vercel.app How to use it from npm services [codepen examples] [1.7.9] Lights - Who to use matrix-engine on codepen: https://codepen.io/zlatnaspirala/full/OJZXMWR BHV Pseudo Skeletal animation: https://codepen.io/zlatnaspirala/full/OJQdGVM Physics (cannon.js) https://codepen.io/zlatnaspirala/pen/rNvLGxE?editors=0010 Install dependencies Matrix engine keep minimum dependency. uglify-js, minify browserify, watchify npm run install.dep npm i @Note: For windows users maybe you will need to add browserify to the env PATH if you got errors on commands npm run build.*. Help for localhost dev stage Build Application bundle script From [1.8.0] you can use build for develop with watch task: npm run examples npm run app @Note: If you use unsecured http protocol no build needed at all just navigate to the html file who loade script with type=module. No need for this any more but you can use it. For production/public server you will use npm run build.XXX commands. and then upload project to the usually /var/www/html/. app-build.html , examples-build.html loads compiled javascript type text/javascript. Build entry App.js npm run build.app Now navigate to the app-build.html page. Build entry App-Examples.js npm run build.examples Now navigate to the examples-build.html page. Build just library npm run build.lib Build with uglify build.app.ugly; Build ALL build.all; After all for production is recommended to use compressed script. Production Final (bash): ./compress Switch example with url params Usefull also for production for switching whole pages/apps. https://localhost/matrix-engine/query.html?u=adding_color_cube https://localhost/matrix-engine/query-build.html?u=adding_color_cube Code access: const QueryString = matrixEngine.utility.QueryString; Take a look at query-build.html List of examples: Adding color cube Adding color pyramyde Adding color square Adding tex square with raycast Adding color triangle Adding geometry Adding multi (compose) textures Adding square texture Blending Audion manipulation Camera texture (stream texture) Cube Cube Geometry Cube Light & texture Cube light dynamic Custom texture First Person controller Load obj files - UV maps Object animation -morh sequence Object animation mesh indices calculation JS1Kilo examples implementation Porting 2D canvas (Active textures) Sphere geometry Texture uv manipulation Videos textures Physics Cube with force on raycast trigger Physics Sphere BVH loader, animation play Load obj sequences FPShooter example (+Sounds) [WIP] specular_light_basic -> global light position test [WIP] Lens effect shaders for cube [WIP] Features description Camera config In ./program/manifest.js. Access is App.camera. Note: One of params FirstPersonController or SceneController must be false. FirstPersonController is classic first person view with movement WASD and mouse look. SceneController use direct input WASD. To make camera angle view change press shift to enable camera angle. Middle mouse button will enable drag scene to left/right/top/down. Mouse middle wheel change work only when shift is pressed. camera: { viewAngle: 45, nearViewpoint: 0.1, farViewpoint: 1000, edgeMarginValue: 100, FirstPersonController: false, SceneController: false, sceneControllerDragAmp: 0.1, sceneControllerDragAmp: 0.1, speedAmp: 0.5, sceneControllerEdgeCameraYawRate: 3, sceneControllerWASDKeysAmp: 0.1 }, Range of matrixEngine.Events.camera.pitch in ForstPersonController is (-33 to 33). To get access for camera use matrixEngine.Events.camera. Typically looks: { "roll": 0, "rollRate": 0, "rallAmp": 0.05, "pitch": 0.24500000000000632, "pitchRate": 0, "yaw": -6945.400000016527, "yawRate": 0, "xPos": 5.1753983300242155, "yPos": 2, "zPos": -21.90917813969003, "speed": 0, "yawAmp": 0.05, "pitchAmp": 0.007 } Light And Shadows [1.7.6] activateShadows works only for cube for now. world.Add("cubeLightTex", 1, "myCube4", textuteImageSamplers); App.scene.myCube4.activateShadows(); App.scene.myCube4.shadows.activeUpdate(); App.scene.myCube4.shadows.animatePositionY(); If you wanna color vertex but with direction and ambient light then: // Simple direction light world.Add("cubeLightTex", 1, "myCube7", textuteImageSamplersTest); App.scene.myCube7.position.setPosition(3,3,-11); App.scene.myCube7.geometry.colorData.SetGreenForAll(0.5) App.scene.myCube7.geometry.colorData.SetRedForAll(0.5) App.scene.myCube7.geometry.colorData.SetBlueForAll(0.5) App.scene.myCube7.deactivateTex(); Make square pattern // Custom generic textures. Micro Drawing. // Example for arg shema square for now only. var options = { squareShema: [4,4], pixels: new Uint8Array(4 * 4 * 4), style: { type: 'chessboard', color1: 0, color2: 255 } }; App.scene.myCube9.textures.push( App.scene.myCube9.createPixelsTex(options) ); Physics Physics based on cannon.js Support list : 😇 cube sphere Example with physics and raycast hit detect: App.camera.SceneController = true; canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); }); window.addEventListener('ray.hit.event', (ev) => { console.log("You shoot the object! Nice!", ev) /** * Physics force apply */ if (ev.detail.hitObject.physics.enabled == true) { ev.detail.hitObject.physics.currentBody.force.set(0,0,1000) } }); var tex = { source: ["res/images/complex_texture_1/diffuse.png"], mix_operation: "multiply", }; // Load Physics world! let gravityVector = [0, 0, -9.82]; let physics = world.loadPhysics(gravityVector); // Add ground physics.addGround(App, world, tex); world.Add("cubeLightTex", 1, "CUBE", tex); var b = new CANNON.Body({ mass: 5, position: new CANNON.Vec3(0, -15, 2), shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)) }); physics.world.addBody(b); // Physics App.scene.CUBE.physics.currentBody = b; App.scene.CUBE.physics.enabled = true; const objGenerator = (n) => { for(var j = 0;j < n;j++) { setTimeout(() => { world.Add("cubeLightTex", 1, "CUBE" + j, tex); var b2 = new CANNON.Body({ mass: 1, linearDamping: 0.01, position: new CANNON.Vec3(1, -14.5, 15), shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)) }); physics.world.addBody(b2); App.scene['CUBE' + j].physics.currentBody = b2; App.scene['CUBE' + j].physics.enabled = true; }, 1000 * j) } } objGenerator(100) Networking [1.8.0] Networking based on webRTC. If you wanna use multiplayer mode you need to run intro folder networking/ next commands: npm i node matrix-server.js Networking Support Methods list: ✅😇 Any scene object: ➡ position SetX() SetY() SetZ() ➡ rotation.rotateX() rotateY() rotateZ() Cube, Sphere, Square ➡ geometry.setScale() ➡ geometry.setScaleByY() ➡ geometry.setScaleByZ() ➡ geometry.setScaleByZ() ➡ geometry.setTexCoordScaleFactor() Pyramid ➡ geometry.setScale() ➡ geometry.setSpitz() Networking minimal example export var runThis = world => { world.Add("pyramid", 1, "MyCubeTex"); world.Add("square", 1, "MyColoredSquare1"); // Must be activate matrixEngine.Engine.activateNet(); // Must be activate for scene objects also. // This is only to force avoid unnecessary networking emit! App.scene.MyCubeTex.net.enable = true; App.scene.MyCubeTex.net.activate(); App.scene.MyColoredSquare1.net.enable = true; App.scene.MyColoredSquare1.net.activate(); // Just call it normally App.scene.MyCubeTex.position.SetZ(-8); App.scene.MyColoredSquare1.position.SetZ(-8); }; It is perfect solution webGL vs webRTC. Origin code used broadcaster class from visual-ts game engine project. Custom textures We just override function for texture executing code. Next level is full custom opportunity, geometry, collision, networking etc. App.scene.MySquareTexure1.custom.gl_texture = function (object, t) { world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.LINEAR); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.LINEAR); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE); world.GL.gl.texImage2D( world.GL.gl.TEXTURE_2D, 0, // Level of details world.GL.gl.RGBA, // Format world.GL.gl.RGBA, world.GL.gl.UNSIGNED_BYTE, // Size of each channel object.textures[t].image ); world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D); }; Opengles native cubeMap [1.8.5] If you wanna custom canvasd2d draws for aech cube side New tag cubeMap takes texture.source empty array. Canvas2d Example: /** * @description * What ever you want! * It is 2dCanvas context draw func. */ function myFace(args) { const {width, height} = this.cubeMap2dCtx.canvas; this.cubeMap2dCtx.fillStyle = args[0]; this.cubeMap2dCtx.fillRect(0, 0, width, height); this.cubeMap2dCtx.font = `${width * args[2]}px sans-serif`; this.cubeMap2dCtx.textAlign = 'center'; this.cubeMap2dCtx.textBaseline = 'middle'; this.cubeMap2dCtx.fillStyle = args[1]; this.cubeMap2dCtx.fillText(args[3], width / 2, height / 2); } var tex = { source: [], mix_operation: "multiply", cubeMap: { type: '2dcanvas', drawFunc: myFace, sides: [ // This is custom access you can edit but only must have // nice relation with your draw function ! // This is example for render 2d text in middle-center manir. // Nice for 3d button object! {faceColor: '#F00', textColor: '#28F', txtSizeCoeficient: 0.8, text: 'm'}, {faceColor: '#FF0', textColor: '#82F', txtSizeCoeficient: 0.5, text: 'a'}, {faceColor: '#0F0', textColor: '#82F', txtSizeCoeficient: 0.5, text: 't'}, {faceColor: '#0FF', textColor: '#802', txtSizeCoeficient: 0.5, text: 'r'}, {faceColor: '#00F', textColor: '#8F2', txtSizeCoeficient: 0.5, text: 'i'}, {faceColor: '#F0F', textColor: '#2F8', txtSizeCoeficient: 0.5, text: 'x'} ] } }; Classic images: If you wanna load images, see example: world.cubeMapTextures([ 'res/images/cube/1.png', 'res/images/cube/2.png', 'res/images/cube/3.png', 'res/images/cube/4.png', 'res/images/cube/5.png', 'res/images/cube/6.png', ], (imgs) => { var tex = { source: [...imgs], mix_operation: "multiply", cubeMap: { type: 'images', } }; world.Add("cubeMap", 1, "myCubeMapObj", tex); }); BVH Matrix Skeletal [1.5.0] New deps pack bvh-loader. It is bvh parser created for matrix-engine but can be used for any other graphics language. const options = { world: world, autoPlay: true, myFrameRate: 10, showOnLoad: false, // if autoPLay is true then showOnLoad is inactive. type: 'ANIMATION', // "TPOSE' | 'ANIMATION' loop: 'playInverse', // true | 'stopOnEnd' | 'playInverse' | 'stopAndReset' globalOffset: [-30, -180, -155], skeletalBoneScale: 6, boneNameBasePrefix: 'backWalk', skeletalBlend: { paramDest: 7, paramSrc: 6 }, // remove arg for no blend boneTex: { source: [ "res/icons/512.png" ], mix_operation: "multiply", }, // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex' drawTypeBone: 'squareTex' }; const filePath = 'https://raw.githubusercontent.com/zlatnaspirala/bvh-loader/main/javascript-bvh/example.bvh'; var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options); Live demo https://codepen.io/zlatnaspirala/pen/OJQdGVM Raycast cube , square, triangle, obj (ObjLoader) [1.8.4] From 1.8.4 raycast hit trigger works for obj's. Raycast works fine also in firstPersonCamera operation. Raycast work perfect after local single rotation x, y, or z. Combination rotx and roty works , roty and rotz only with rotx = 180 for now. Bug if walk behind object then turn arround and try raycast but no work for now. Usage: canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); }); canvas.addEventListener('ray.hit.event', (ev) => { alert("You shoot the object! Nice") }); First person controller: If you activate this flag you get fly/free camera controller by default. // In one line activate also deactivate. App.camera.FirstPersonController = true; Animated female droid (morph targets): // Obj Loader function onLoadObj(meshes) { // No need from [1.8.2] // App.meshes = meshes; for (const key in App.meshes) { matrixEngine.objLoader.initMeshBuffers(world.GL.gl, App.meshes[key]); } textuteImageSamplers2 = { source: ['res/images/RustPaint.jpg'], mix_operation: 'multiply' }; setTimeout(function () { var animation_construct = { id: 'female', meshList: meshes, // from [1.8.2] sumOfAniFrames: 18, currentAni: 0, speed: 3 }; world.Add('obj', 1, 'female', textuteImageSamplers2, App.meshes.female, animation_construct); App.scene.female.position.y = -3; App.scene.female.rotation.rotationSpeed.z = 20; App.scene.female.position.z = -13; // App.scene.armor.mesh.setScale(5) }, 100); } // Custom list 1, 3, 5, 9 matrixEngine.objLoader.downloadMeshes( { female: 'res/3d-objects/female/female_000001.obj', female1: 'res/3d-objects/female/female_000003.obj', female2: 'res/3d-objects/female/female_000005.obj', female3: 'res/3d-objects/female/female_000009.obj', ... }, onLoadObj ); // From [1.8.2] you can use `makeObjSeqArg` matrixEngine.objLoader.downloadMeshes( matrixEngine.objLoader.makeObjSeqArg( { id: objName, path: "res/bvh-skeletal-base/swat-guy/seq-walk/low/swat", from : 1, to: 34 }), onLoadObj ); Blending: // Use it App.scene.female.glBlend.blendEnabled = true; App.scene.female.glBlend.blendParamSrc = ENUMERATORS.glBlend.param[4]; App.scene.female.glBlend.blendParamDest = ENUMERATORS.glBlend.param[4]; Load Obj with UV map (Blender export tested): For more details dee this example script: load_obj_file.js Video texture: New way: There is no prefix for path any more. Fixed autoplay on AFTRE FIRST CLICK. Multi textures loading. Video texture corespond with direction & ambient light. Important it is direct pass from video to webgl textures. No canvad2d context. NOT WORKING with shadows for now. App.scene.outsideBox.streamTextures = new VT( "res/video-texture/lava1.mkv" ); TODO: Add arg { mixWithCanvas2d } Old way [still present]: world.Add('cubeLightTex', 1, 'TV', textuteImageSamplers, App.meshes.TV); App.scene.TV.streamTextures = new VIDEO_TEXTURE('Galactic Expansion Fractal Morph [Official Video]'); Camera texture: App.scene.TV.streamTextures = new ACCESS_CAMERA('webcam_beta'); MatrixBVHCharacter (MEBvhAnimation) MatrixBVHCharacter feature use class matrixEngine.MEBvhAnimation. Its load primitives for bvh skeletal. MatrixBVHCharacter is proccess where we load pre defined skelatal obj parts(head, neck, legs...) . @Note Human character failed for now but func works. Nice for primitive obj mesh bur rig must have nice description of position/rotation. In maximo skeletal bones simple not fit. If you pripare bones you can get nice bvh obj adaptation for animations. mocap set of assets looks better for this operation. Example Code: const options = { world: world, // [Required] autoPlay: true, // [Optimal] showOnLoad: false, // [Optimal] if autoPLay is true then showOnLoad is inactive. type: 'ANIMATION', // [Optimal] 'ANIMATION' | "TPOSE' loop: 'playInverse', // [Optimal] true | 'stopOnEnd' | 'playInverse' | 'stopAndReset' globalOffset: [-30, -180, -155], // [Optimal] for 1.5 diff from obj seq anim skeletalBoneScale: 2, // [Optimal] /*skeletalBlend: { // [Optimal] remove arg for no blend paramDest: 4, paramSrc: 4 },*/ boneTex: { source: [ "res/images/default/default-pink.png", ], mix_operation: "multiply", }, drawTypeBone: "matrixSkeletal", matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/", objList: ['spine', 'hips', 'head'] , matrixSkeletalObjScale: 80, // [Optimal] // Can be predefined `MatrixSkeletal` prepared skeletal obj parts/bones. // Can be primitives: // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex // New optimal arg // Sometime we need more optimisation ignoreList: ['spine1'], ifNotExistDrawType: 'triangle' }; const filePath = "res/bvh/Female1_B04_StandToWalkBack.bvh"; var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options); This is folder for obj parts (head arm legs ...) Filenames are simplefield like head.obj , arm.obj without any prefix from constructor... matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/", Take a look example: matrix_skeletal.js. Character (ObjLoader/morph targets) This good in runtime bad for loading procedure. How to update character animation? Maximo -> download dea or fbx -> import intro blender Import multi or one animation. -> blender export -> obj (animation) This is new feature from [1.8.2]. Take a look at : load_obj_sequence.js For now engine use objLoader to load all morphs. matrixEngine.objLoader.downloadMeshes( matrixEngine.objLoader.makeObjSeqArg( { id: objName, path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi", from: 1, to: 61 }), onLoadObj ); In onLoadObj callback function: var animArg = { id: objName, meshList: meshes, // sumOfAniFrames: 61, No need if `animations` exist! currentAni: 0, // speed: 3, No need if `animations` exist! // upgrade - optimal animations: { active: 'walk', walk: { from: 0, to: 35, speed: 3 }, walkPistol: { from: 36, to: 60, speed: 3 } } }; FirstPersonShooter examples [WIP] Just like in eu4 shooter we dont need whole character mesh for FPSHooter view. I cut off no hands vertices in blender to make optimised flow. Feature [1.8.12] App.events Access. Take a look at the apps\fps_player_controller.js example. App.events.CALCULATE_TOUCH_DOWN_OR_MOUSE_DOWN = (ev, mouse) => { // From [1.8.12] // checkingProcedure gets secound optimal argument // for custom ray origin target. // mouse console.log(mouse.BUTTON) if(mouse.BUTTON_PRESSED == 'RIGHT') { // Zoom } else { // This call represent `SHOOT` Action. // And it is center of screen matrixEngine.raycaster.checkingProcedure(ev, { clientX: ev.target.width / 2, clientY: ev.target.height / 2 }); } }; WIP calculating for fixing FPS camera view. [1.8.11] New 3dObject property isHUD. If you setup this to the true value object will escape world rotation/translation. Only local translation is active. This is good for HUD Menu in 3d space. Texture editor (runtime): Using Vjs3 with Editor use: App.scene.outsideBox.streamTextures = new Vjs3( "./2DTextureEditor/actual.html", "actualTexture" ); Running Editor Tool npm run run.tex.editor // or npm run te After creating 2d texture direct on page at the end run: npm run build.tex.editor to make build final pack. Imports note we can use any canvas 2d app [anyCanvas] . In examples: porting2d.js [Old VJS] Example of anyCanvas porting_text.js [Vjs3] porting2d_particle.js [Vjs3] It is very powerfull tool! Research Vjs3 source examples at: https://github.com/zlatnaspirala/visualjs On NPM Service npm i visual-js , matrix engine already have visual-js , visual-js-server editor backend part. To show/hide iframe use: App.scene.outsideBox - is any object who have streamTextures LOADED with 2DCANVAS. App.scene.outsideBox.streamTextures.showTextureEditor(); E('HOLDER_STREAMS').style.display = 'none'; Access to the [any] canvas2d program: anyCanvas(path-of-html,name-of-canvas) App.scene.outsideBox.streamTextures = new anyCanvas( "./apps/funny-slot/", "HELLO_WORLD") Live editor [actual.js predefined] Old VJS loading with anyCanvas() Old Live demo: Video and webcam works at: https://maximumroulette.com/webgl2/examples.html Changes: From [1.8.14] Html's Every static file / resource moved to the new folder ./public Improved FPShooter example , added collision box for player. From [1.8.13] MatrixSounds Access object App.sounds. Usage: // Play source audio [single instance]. App.sounds.createAudio('music', 'res/music/background-music.mp3'); // Play simultanius same source audio. App.sounds.createAudio('shoot', 'res/music/single-gunshot.mp3', 5); From [1.8.12] Draw scene list swap items options must be done! From [1.8.0] Added watchify. We have support for real time connections based on webRTC. You must work on https protocol even in localhost. Change in program/manifest net = false if you dont wanna use networking. Node.js Multiplayer Server based on webRTC. Take a look at the folder ./netwotking. Run it: cd networking node matrix.server.js If you wanna in terminal popup then run (bash/work on win also if you have bash) dedicated.sh./ or dedicated.bat. From [1.7.11] No need for: // matrixEngine.Engine.load_shaders('shaders/shaders.html'); Initial Shaders now loads from code (inside engine). No need any action. PWA Fully runned Integrated Add to Home page and regular html5 page options. In same time fixed all autoplay audio and video context construction. It is good to consult pwa test on page. Best way is to keep it on 100% pass. Secured 🛡 No Dependabot alerts opened. Credits && Licence: Video material used from :From youtube.com : Electric sheep - a facinating animated flame fractal TheMrNgaard Creative Commons Attribution licence (reuse allowed) Project Base Structure inspired by Copyright (C) 2014 Tappali Ekanathan Keestu ([email protected]) GNU General Public License Textures download from http://textures.com Dinamic texture bitcoin used from: Author:Ioannis Cherouvim GitHub:cherouvim Reddit:/r/cherouvim Website:cherouvim.com Compo:canvas Demo link:https://js1k.com/2017-magic/demo/2853 Shortlink:https://js1k.com/2853 Female 3d Object http://www.blendswap.com/blends/view/26225 Creative Commons Attribution 3.0 http://www.blendswap.com/users/view/AndresCuccaro https://freestocktextures.com/texture/bark-wood-plant,122.html https://github.com/Necolo/raycaster Great https://www.mixamo.com/ OBJECT LOADER http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html Player character https://www.mixamo.com/#/?page=1&query=walk&type=Motion%2CMotionPack BVH collections from: Special thanks to the CMU Graphics Lab Motion Capture Database which provided the data http://mocap.cs.cmu.edu/` Used in examples: BLACK FLY by Audionautix | http://audionautix.com Music promoted by https://www.free-stock-music.com Creative Commons Attribution-ShareAlike 3.0 Unported https://creativecommons.org/licenses/by-sa/3.0/deed.en_US Networking based on https://github.com/muaz-khan/RTCMultiConnection https://unsplash.com/photos/8UDJ4sflous https://webgl-shaders.com/shaders/frag-lens.glsl https://www.fesliyanstudios.com/royalty-free-sound-effects-download/gun-shooting-300
  6. cmann
    What physics engines are available for Javascript and/or Typescript? I've searched myself but maybe there's one or two I missed. I also found a post in these forums but that's over two years old now; It's a little disappointing to see that some of them aren't actively developed and lacking a lot of features. I put together a test to compare the different engines I tried - I've attached the files if anyone wants to try it out. Here are the engines I've tried: PhysicsJs http://wellcaffeinated.net/PhysicsJS/ - Incomplete: lacking simple features like constraints - Seems like it was last updated 2 years ago - Possibly the worst performance - Strange API (in my opinion) and difficult to use - Built in mouse interaction behaves strangely MatterJs http://brm.io/matter-js/ - Also incomplete and lacking constraints - Has a built in mouse constraint but it acts strangely - Updated recently - Simple and easy to use - Doesn't handle stress test well p2.js http://schteppe.github.io/p2.js/ - Complete - Updated within the last few months - Doesn't handle stress test well - Easy to use - Good documentation Box2DWeb https://github.com/hecht-software/box2dweb - Complete - everything you would expect from Box2D - Last updated one or two years ago - Semi-poor documentation - you have use the box2d flash documentation which is fairly thorough but slightly outdated - Much faster and a lot more accurate than the above three libraries. Nape http://napephys.com/ - Complete - lots of features - but isn't very active - Has a great marching squares utility which can convert bitmaps into polygons - Good site and documentation - Easy to use but the pooling get/dispose stuff can be a bit confusing - Similar (or maybe even slight better) performance to Box2DWeb and possibly more accurate - Large - minified it's still 1.7MB The one problem with Nape though is that it isn't really meant for Javascript and I had a lot of trouble getting it set up in Typescript. There were some project to convert it to js and generate definition files but I had to modify them a lot to get something complete that worked for me. I also had to manually convert the debug draw classes from as3 to js and Easeljs. Luckily that only needs to be done once - after that I didn't have any problems using it though. I also tried PhysicsType2D (http://physicstype2d.com/) but couldn't get it to work. Overall I was a bit disappointed; In terms of performance, the 'native' js libraries fell short by a lot compared to the two ported ones, and on top of that they lacked a lot of important features. Even the ported ones didn't perform as well as their Flash/As3 versions - the Nape stress test (you can find it here) which I copied, runs significantly better in flash. PhysicsLib.zip UPDATE: You can find the updated github repo here: https://github.com/cmann1/Javascript-Physics-Library-Tests/
  7. DenysVol
    I need to display a large number (for example 400) of high resolution textures at the same time, for this I used the ParticleContainer from the example - https://pixijs.io/examples/#/demos-basic/particle-container.js. But in the end, I get FPS = 10-15, the more sprites, the lower the FPS, even if you turn off the animation - there is no difference, the image in idle mode also heavily loads the browser, which is why the page scroll is very freezing. - https://codesandbox.io/s/admiring-lamarr-p8bvyf?file=/index.html I could not find a solution anywhere, so I will be grateful for your help.
  8. ohmed
    Hi all and good day! 13 days ago started with new project and would like to share some stuff with you It's not completely from scratch, but took some base from my prev game DatTank [https://dattank.io]. How it looked 13 days ago How it looks today [melee attacking sys example] Would like to know if it would be interesting for somebody to read through some details in some articles or thms like this. Uh, and would be awesome to get some feedback Thx for your attention! ps: If you want to get quick updates from me follow on https://twitter.com/iOhmed
  9. Alexander Krug
    Become a part of our unique success story! More than 500 million people have already played our next-gen instant games. Join us and unleash your superpowers to build the future of gaming! SOFTGAMES is looking for a JavaScript Game Developer to help us bring our games to new Instant Game Platforms that will entertain tens of millions of people every month. The JavaScript Game Developer designs, architects, tests and implements features into our live games. Further you'll work on bringing our games to existing and upcoming Instant Game Platforms. You will collaborate with producers, artists and other game developers to share learnings and best practices. The JavaScript Game Developer will ship robust and high-performance code, be passionate, and act as a fount of knowledge when it comes to game development. As part of a small, experienced and dynamic team you will enjoy a creative, challenging and collaborative environment. You can either work REMOTELY or in our central Berlin office surrounded by a great bunch of people! **Qualified applicants will be expected to complete a technical assessment. Your role: Write robust code to be used by millions of users Maintain and optimise features of existing Instant Games Develop and integrate different platform SDKs Independently create complete solutions from scratch Work on schedule, set clear goals Share knowledge and help colleagues Your profile: Great passion for games! 3+ years of professional software engineering experience Strong knowledge and experience with JavaScript (HTML5) Knowledge of TypeScript or another language with static typing Profiling and optimising JavaScript/TypeScript code Node.js CI/CD Experience with build systems (e.g. Webpack or gulp), PixiJS, Phaser Shipped at least 2 mobile/social title, preferably on multiple platforms Ability to quickly get up to speed with existing code Deliver high-quality and well-structured code Open-minded and keen to learn What we offer: We have a flexible working setup - either fully remote or on-site in central Berlin. Your choice! Working and living in Germany has many advantages as e.g. a high job security, great work-life balance and one of the best universal health care systems in the world! Further our Berlin full time employees benefit from: Visa: Our visa assistance service guides you through the whole process and helps with tips and tricks to get the approvals and your visa as fast as possible. Relocation Support: We support your move to Berlin with e.g. flat hunting, paper work like local registration, setting up bank accounts etc. Language classes: We pay your German lessons so you can order food auf deutsch very fast and go right up to perfecting your business vocabulary. Further training: A personal learning budget to spend on learning and development, including books, workshops, etc. Flexible working hours and home office: Productive hours differ individually. That’s why you're welcome to show up in the office whenever you're ready for it. Need to watch the kids or wait for a handicraftsman? No problem - we also offer the opportunity for home office. Office: A super modern office with state of the art tech, based in the center of Berlin, quickly to reach from all destinations thanks to the excellent public transport connections. Equipment: Choose between a MacBook Pro or Windows Laptop. Furthermore our office features the latest projectors, cameras, testing devices, monitors - you name it. Fresh fruits, snacks and drinks: Enjoy fresh fruits, free coffee and a fully stocked fridge with cold Water, Juices, Coke, Club Mate, Beer etc. For the sweet-toothed we have snacks, chocolate and chips of course. Epic company parties: Regular company parties to celebrate, including Summer Party, Oktoberfest, Christmas Party. Team events: We have regular Casual Fridays, Board Game Nights, Pub Quizzes, Team lunches, Company breakfasts and much more … Team spirit: Beyond our amazing parties and company events, the team further organizes activities themselves such as playing soccer together, a cooking group, a Japanese learning group, and much more. About SOFTGAMES With offices in Berlin (HQ) and Toronto, SOFTGAMES is an instant gaming company. We develop casual, truly social games that can be played instantly across all devices. We partner closely with Facebook, Samsung and more to craft the next generation of instant games that billions of people can play together. To-date, more than 500 MM people have played our games on Facebook, including Cookie Land, Solitaire Story Tripeaks, Mahjong Story, Space Invaders, Fish Story, Bubble Shooter or Candy Rain. At SOFTGAMES, we believe that different perspectives and background in our teams contribute to the quality of our work. We value diversity and therefore welcome all applications - regardless of gender, nationality, ethnic and social origin, religion / worldview, disability, age as well as sexual orientation and identity. Have we caught your interest? Then we look forward to your detailed application together with your salary expectations and earliest possible start date.
  10. feliciaop
    We are currently building our games platform and we're looking for quick, bite-sized games to add to our growing list of open-source titles. If anyone's interested, feel free to drop us an e-mail at [email protected] with your HTML5 game portfolio and we'd be happy to discuss. Thanks
  11. EnLiven
    Hello, I'm new to Javascript and PIXI I've been recently been working on a project using PIXIJS and need some help. I am trying to make a user interface with 8 buttons for the bounding box and 1 rotational button to scale, rotate and move my sprite. At the moment, I made each individual buttons of the bounding box an individual sprite and manually setting their interactive mode and coordinate and added them as a child to my main sprite. The issue with this method is that when I move one button, the other buttons don't move together to align with the transformation. Also, I am trying to make a rotational button that is capable of rotation the sprite by its pivot point in both directions using the mouse movement. Can anyone help me?
  12. umen
    hello all Abit wired question but is there any tool that given HTML with included javascript can Flaten all the page to 1 big HTML and javascript file ? Thanks
  13. Pixel Guardian
    Hello everyone! Nice to make your acquaintance. It’s been awhile since I’ve been active on here, and I’d like to change that. So let’s start a conversation. Whatcha working on? You a team? Solo developer? Let’s chat! I’d love to hear from you.
  14. TheCrock
    I am following the excellent book Foundation Game Design with HTML5 and Javascript. I have a piece of code, which works but i'm not sure why. function destroyAlien(alien) { //Change the alien's state and update the object alien.state = alien.EXPLODED; alien.update(); //Remove the alien after 1 second setTimeout(removeAlien, 1000); function removeAlien() { removeObject(alien, aliens); removeObject(alien, sprites); } As you can see it is a function which uses setTimout to call another function. It only calls removeAlien function when it is inside the main function. If I move callAlien function out of the main function it does not work. I am puzzled as to why this is. Can any sage member here tell me why this is? Thanks in advance Crock TheCrock Posts: 2 Joined: 12 Nov 2020, 16:02
  15. Cyborg_Ean
    I have this idea for creating a character customization system. The system would be implemented as follows. 1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example: Lets assume a full body template for a characters design is 125 by 125 consisting of head, body, and leg components. The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank. The same would be done for the body and leg components. 2) Bind the components together via some sort of linked list or maybe even graph based implementation. I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers. Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated. I think this is a great opportunity to practice graphs. 3) Next there will be an interface that allows the player to choose the color and textures of each of these components. The player will confirm and submit their design when finished. Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data. 4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps 4b) Composite the items on a canvas and store it in a uri using the canvas to url method. I also lack experience with api but I definitely can see how it would work. 5) Ideally I'll save the data to a database and retrieve them via player credentials. I'm not sure if I'm over complicating things or not so any feedback would be appreciated. I use Phaser but any html5 based idea or solution should be fine.
  16. ilterisYucel
    I created a simple particle class to use in the space shooter I'm working on. It's a 105-line class available for elementary particle effects, though it can't do everything an advanced widget library does. You can download from gitlab or below and use it in all your hobby and commercial projects. Cheers. https://gitlab.com/bihenaso_games/shittypixiparticle/-/blob/master/static/libs/shitty-pixi-particle.js The test video is in the link below. shitty-pixi-particle.js
  17. cormiodo
    Hello, Hi everyone, I'm developing a new hospital manager game; at the moment the main engine has been implemented and numerous other functions are being developed. For now, the developed language is Italian, but internationalization is planned. The game site is univerhosp.variousdom.it I need to find some beta testers to verify the functioning and the response times; I also created a forum with explanations. In the forum everyone can insert ideas, doubts and any information that may be useful for development. The forum is accessible from the game menu.
  18. Swati
    Have 2 - 10+ years of software development experience, including front-end
development experience with HTML5, Angular, Javascript and CSS • Break down user and technical stories into tasks and work on them • Maintain our existing Flex codebase and help build out a new HTML5 codebase. • Write unit tests and code comments • Write technical documentation for use by other developers, testers and support • Participate in code reviews and refactoring • Participate in Level 3 support of production environments • Attend daily scrum meetings • Collaborate with team members overseas and on location
Desired Skills and Qualifications: • Strong proficiency with HTML5 stack, including CSS3/JavaScript and at least
one library or framework (e.g. AngularJS, jQuery, etc.) – both preferred. • Good knowledge of Adobe Flex and Actionscript is a plus • Familiarity with Agile practices • Working knowledge of code versioning tools, such as Git • Fantastic communication skills Github account with c revert to [email protected]
  19. newJS
    Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?
  20. hauptspieler
    I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself. Heres the code I'm using : <script type="text/javascript"> // SETUP INICIAL var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var innerWidth = 360, innerHeight = 620; canvas.width = innerWidth; canvas.height = innerHeight; // VARIAVEIS var score = 0, lastTime = 0; // TECLAS DE MOVIMENTAÇÃO window.onkeydown = pressionaTecla; function pressionaTecla(tecla){ if(tecla.keyCode == 38) { player.y = player.y - 10; } if(tecla.keyCode == 40) { player.y = player.y + 10; } if(tecla.keyCode == 39) { player.x = player.x + 10; } if(tecla.keyCode == 37) { player.x = player.x - 10; } } // PERSONALIZAÇÃO DO PLAYER var player = { }, player_width = 100, player_height = 105, player_img = new Image(); player_img.src = 'images/spaceship.png'; // OBJETO DO PLAYER player = { width : player_width, height: player_height, x : innerWidth/2 - player_width/2, // centralizar y: innerHeight - (player_height+10), //deixar em baixo power : 10, draw: function(){ // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS if(this.x <= 0 ){ this.x = 0; }else if (this.x >= (innerWidth - this.width)) { this.x = (innerWidth - this.width); } if(this.y <= 0 ){ this.y = 0; }else if (this.y >= (innerHeight - this.height)) { this.y = (innerHeight - this.height); } ctx.drawImage(player_img, this.x, this.y, this.width, this.height); } }; // FUNDO DE GALAXIA *codigo fonte do fundo retirado do site codepen.io https://codepen.io/LeonGr/pen/fdCsI var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = canvas.width; // Number of stars for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random(), vx: Math.floor(Math.random() * 10) - 5, vy: Math.floor(Math.random() * 10) - 5 }); } function updatefundo() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; s.x += s.vx / FPS; s.y += s.vy / FPS; if (s.x < 0 || s.x > canvas.width) s.x = -s.x; if (s.y < 0 || s.y > canvas.height) s.y = -s.y; } } function drawfundo() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); } } // PERSONALIZAÇÃO DO INIMIGO var enemyArray = [], enemyIndex = 0, enemy_width = 35, enemy_height = 43, enemy_timer = 1000, enemy_img = new Image (); enemy_img.src = 'images/spaceship.png'; // OBJETO DO INIMIGO function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.img = enemy_img; this.width = enemy_width; this.height = enemy_height; this.rotation = rotation; enemyIndex++; enemyArray[enemyIndex] = this; this.id = enemyIndex; ctx.drawImage(this.img, this.x, this.y, this.width, this.height); this.update = function(){ this.y+= this.dy; this.x+= this.dx; this.draw(); } this.delete = function(){ delete enemyArray[this.id]; } this.draw = function(){ ctx.drawImage(this.img, this.x, this.y, this.width, this.height); } } // FUNÇÃO DE CRIAR INIMIGOS function create_enemy(){ var x = Math.random() * (innerWidth - enemy_width); var y = -enemy_height; var dx = 3; var dy = 3; var rotation = Math.random(); new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation); } // LOOPING DA ANIMAÇAO (MAINFRAME DO GAME) function gameLoop(currentTime){ requestAnimationFrame(gameLoop); ctx.clearRect (0,0, canvas.width, canvas.height); drawfundo(); updatefundo(); // SCORE ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('PONTOS: '+score , 15, 30); // ENERGIA ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30); // JOGADOR player.draw(); if(currentTime >= lastTime + enemy_timer){ lastTime = currentTime; create_enemy(); } create_enemy(); } gameLoop(); </script> Everything is working fine except the enemies not showing. Already checked the images folder and it's all set up like I've puted in the code. Dev tools console does not show any errors. Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO" Please help!
  21. game_prince
    hello i want to make a online multiplayer online card game using phaser. CAn you please help me in this that from where i would start??
  22. therax1986
    Hello guys, I found one of my old projects on the computer and decide to remake it and share it with you. It's a simple 2D game, made in HTML5. Enjoy it. http://covid19arena.com/
  23. _pyropanda_
    Hi, I wanted to make a game that's really challenging and simple at the same time. Something that will require some skills and not just a simple mindless game that shows a lot of ads. Something that you will need to get used to first, learn the rhythm of the game and then be able to complete the levels. So after 5 months (only working on the weekends; not all weekends), I have finally released a playable version of the game in the Google Play Store. Let me know what you think. I would really appreciate some feedback and what you think about the game. It's not much, but hey, I'm actually proud of it Oh and one more thing, it really does require "some" skills. Play Store Link: https://play.google.com/store/apps/details?id=com.pandabytes.kiteykite
  24. XipsAhoy
    I am trying to make a game so I tried to load a tileset, to help me make the game, but when I try to play my game, this shows on the console- ```Cannot read property 'addTilesetImage' of undefined``` This is my code: ``` Ball.Level1 = function (game) {}; Ball.Level1.prototype = { create: function () { var map; var layer; this.map.addTilesetImage('element-h'); this.map.addTilesetImage('element-w'); this.map = this.game.add.tilemap('map', 32, 32); this.layer = this.map.createLayer(0); this.layer.resizeWorld(); } }; ``` this is what I pre-load! ``` this.load.image('element-w', 'img/element-w.png'); this.load.image('element-h', 'img/element-h.png'); this.load.tilemap('map', 'img/Teste.csv'); ``` Thank for your help!
  25. Oasisx
    Hello, hope you'll are doing fine. I'm a beginner programmer and recently I've been working on a 2d physics game engine in JavaScript. Everything seemed to be working fine until I have come across an annoying bug in my push mechanic. I have created a 2d collision system where object A will be pushed away b object B, etc. In addition, I have created a push mechanic meaning, object A can push object b (if it’s not solid). However, I have come upon a problem where e.g. object A (Player), object B (box which the player can push) and object C (Solid wall), he problem occurs when object a pushes object b against object, what happens is object B gets pushed away by object A, but object A doesn’t get pushed away by B meaning, object A will get inside of object B and it will push the object to the top instead of pushing it to the left by activating the wrong collision detection. (as seen in the video). Video which shows the problem: https://www.youtube.com/watch?v=8DHKJNOrO54 (Project files below) I've been trying to solve this problem for awhile now and I just can't find the perfect solution. If anyone would be able to help it'd be great. Thank you game_v1.zip
×
×
  • Create New...