Search the Community

Showing results for tags 'Javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 566 results

  1. I'm looking for ways to optimize a scene I created in the Playground. This scene is based on previous work from another thread, I just added some objects and logic to mimic a small game. It uses native CannonJS for the PFS-camera and movement of the monster models. I used the code and model from the instances demo. From line 16, you can turn on and off physics for the monsters, skeletal animations, the skybox, trees, shadows, procedural textures(grass), and whether or not the monsters should lookAt and follow the player. As well as specify the amount of trees + the range and amount of monsters. https://www.babylonjs-playground.com/#FZZV7K#23 I'm only hitting around ~30 FPS with this example. Is a scene such as this too heavy for WebGL and browsers? The trees are instances, so unless I clone and merge them, I don't see what could be changed there. Maybe a smaller, compressed texture. The monster models all have skeletons and animations, so no instances or merging can be used here. Disabling physics seems to give some FPS boost, so maybe using a worker would do some good in this example. I'll give this a try, and see what effect it has on overall performance. Here's a minimized version, with most things stripped, and 50 monsters without animations. https://www.babylonjs-playground.com/#FZZV7K#24
  2. Optimise code

    This is an extension of post : After hitting play on demo : https://preview.c9users.io/nafroman/bensvid/test.html and move the mouse you can see different screens and with up and down arrows zoom in and out but I am confused as how I can set the mouse so it doesnt go further past the video's bounds. I am wondering if anyone can take a look at my code and suggest any optimisations that can be done to make the playback better
  3. I am trying to make a 'bullet' from the var weapon shoot in a certain direction, this bullet is actually a pokemon ball as I am just making a practice game. I cannot seem to make the 'bullet' go in the direction that I would like it to, I entered: weapon.body.velocity.x = -100; under the the: if (cursors.left.isDown) but this did not work, when I pressed any key the screen would just freeze. Please help me make the 'bullet' go in the direction I want. var items; var game; var player; var weapon; var cursors; var fireButton; function addItems() { items = game.add.physicsGroup(); createItem(100, 400, 'coin'); } function createItem(left, top, image) { var item = items.create(left, top, image); item.animations.add('spin'); item.animations.play('spin', 10, true); } function itemHandler(player, item) { item.kill(); } window.onload = function () { game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.stage.backgroundColor = ('#424242'); game.load.spritesheet('coin', 'coin.png', 36, 44); game.load.spritesheet('player', 'hero.png', 64, 64); game.load.spritesheet('bullet', 'Pokeball.png'); } function create() { player = this.game.add.sprite(100, 200, 'player'); // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, weapon, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.p2.enable(player, weapon); player.body.setSize(30, 45, 16, 12); player.body.immovable = false; // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); addItems(); // Creates 1 single bullet, using the 'bullet' graphic weapon = game.add.weapon(1, 'bullet'); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 400; game.physics.arcade.enable(player); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically weapon.trackSprite(player, 30, 0, true); cursors = this.input.keyboard.createCursorKeys(); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); } function update() { game.physics.arcade.overlap(player, items, itemHandler); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } if (fireButton.isDown) { weapon.fire(); } } function render() { weapon.debug(); } }
  4. Scaling an image down

    How do I scale, or resize, an image in javascript with phaser's framework? I have tried a few different things but they do not seem to be working. I am using a weapon method to throw a pokeball, this is just a test using some code from phaser.io, so the other images aren't mine, I am just testing to try and get the pokeball to be thrown, but it is freaking huge right now! Please help me, I need the pokeball to be about 10x10 px because my character is 64x64. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('bullet', 'Pokeball.png', .01, .01); game.load.image('ship', 'tiles1.png'); } var sprite; var weapon; var cursors; var fireButton; function create() { // Creates 1 single bullet, using the 'bullet' graphic weapon = game.add.weapon(1, 'bullet'); weapon.scale.setTo(.5, .5); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 400; sprite = this.add.sprite(320, 500, 'ship'); game.physics.arcade.enable(sprite); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically weapon.trackSprite(sprite, 14, 0); cursors = this.input.keyboard.createCursorKeys(); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); } function update() { sprite.body.velocity.x = 0; if (cursors.left.isDown) { sprite.body.velocity.x = -200; } else if (cursors.right.isDown) { sprite.body.velocity.x = 200; } if (fireButton.isDown) { weapon.fire(); } } function render() { weapon.debug(); }
  5. I am trying to make a gate that opens when you click on it, and rotate it 90 degrees. I have accomplished this much, but how do I make it go back to it's original position once I click on it again? For instance: *clicks on gate, gate opens, 90 degrees.* *clicks on gate again, gate closes, -90 degrees from the 90 degrees that it went on previous click* Any help would be appreciated! html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <style> html { background: black } canvas { margin: auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.crossOrigin = 'anonymous'; game.load.image('gateopen', 'fenceleft.png'); } var sprite function clickSprite() { console.log("clickSprite"); sprite.angle += 90; } function clickGame() { console.log("clickGame"); } function create() { sprite = game.add.sprite(100, 100, 'gateopen'); sprite.anchor = {x: 1, y: 1} game.inputEnabled = true; sprite.inputEnabled = true; sprite.events.onInputDown.add(clickSprite) game.input.onDown.add(clickGame); } function update() { } function render() { game.debug.bodyInfo(sprite, 32, 32); game.debug.body(sprite); }
  6. Hi, I am trying to make a simple game and have been running into many problems. The problem I am facing now is that I cannot fix this error in my javascript. It says that it cannot read the 'setSize' property on my 'player' sprite, but it works perfectly fine on my other sprites. Next it says that it cannot read the 'velocity' property of the 'player' sprite, but when I comment out the 'setSize' property it works. I just cannot figure out what is wrong, have I misspelled something? I cannot seem to find the problem, so any help would be appreciated. Btw, it worked yesterday, but when I loaded it up today it was no longer working... Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } h2 { color: white; font-size: 8px; font-family: 'Syncopate', sans-serif; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <footer> <h2>&copy; SoulesteDesigns 2017</h2> </footer> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js: // VARIABLES // variables for static objects var walls; var house; var gate; var gate2; // variables for character var cursors; var player; var left; var right; var up; var down; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // ADD HOUSES function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // ADD FENCES OR WALLS function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceleft'); walls.create(-91, -135, 'fenceleft'); // set the walls to be static walls.setAll('body.immovable', true); } // PRELOAD IMAGES FOR ITEMS, PLAYERS, ETC. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); // fence that has adjusted hit boundary game.load.image('gate', 'fenceleft.png'); game.load.image('gate2', 'fencefront.png'); // preload ground game.load.image('ground', 'tiles2.png'); } // ADD THINGS TO GAME function create() { // set area that the player may travel to game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); gate = game.add.physicsGroup(); game.physics.startSystem(Phaser.Physics.ARCADE); gate = game.add.sprite(-91, -70, 'gate'); gate.name = 'gate'; game.physics.enable([gate], Phaser.Physics.ARCADE); // This adjusts the collision body size to be a 100x50 box. // 50, 25 is the X and Y offset of the newly sized box. gate.body.setSize(15, 90, -2, 3); gate.body.immovable = true; gate2 = game.add.physicsGroup(); game.physics.startSystem(Phaser.Physics.ARCADE); gate2 = game.add.sprite(-90, 59, 'gate2'); gate2.name = 'gate2'; game.physics.enable([gate2], Phaser.Physics.ARCADE); // This adjusts the collision body size to be a 100x50 box. // 50, 25 is the X and Y offset of the newly sized box. gate2.body.setSize(90, 15, 3, 3); gate2.body.immovable = true; // adding the ground var ground = game.add.sprite(-224, -100, 'ground', 1); var ground = game.add.sprite(-224, -60, 'ground', 1); var ground = game.add.sprite(-224, -20, 'ground', 1); var ground = game.add.sprite(-224, 20, 'ground', 1); var ground = game.add.sprite(-184, 20, 'ground', 1); var ground = game.add.sprite(-144, 20, 'ground', 1); // add player image and place in screen player = game.add.sprite(-232, -100, 'player'); player.smoothed = true; player.scale.set(.9); player.body.setSize(30, 40, 16, 16); player.body.immovable = false; // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable([player, house, walls, gate], Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { game.debug.bodyInfo(gate2, 32, 32); game.debug.body(gate2); game.debug.bodyInfo(player, 32, 32); game.debug.body(player); }
  7. How to set hitbox?

    I cannot figure out how to change the hitbox size of my player, the character doesn't fit through a hole in a fence so I want to change the hit box sizes. I already tried this https://phaser.io/examples/v2/arcade-physics/offset-bounding-box but this did not work for me, my screen went black when i did this. // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { }
  8. Player and Colliding Objects

    Hi, I need some help with my code, I am trying to create a fenced in area for my character to go in, but he cannot fit through because of the objects that he collides with. How do I change the area that the character collides with? can I reduce the size of the collidable area? The hole in the fence seems quite large enough, but he just won't go through. My game.js // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { } The HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html>
  9. Hi, new to the forums, as well as new to coding. Started learning about a month ago. I need help with my javascript code, I want to be able to use the arrow keys to move my character up, right, down, left, but I cannot figure out how to, I watched a video from Treehouse learning how to do this, and then I decided I would also make a separate one for myself so I copied some of the code, but It will not animate or move the sprite sheet. The character just sits in the middle of the page even though I thought that I coded him correctly to move. He also doesn't even animate, it's completely still. I did however notice that when I made my background larger, that the screen would move, but I want the character to move over the screen, not move with the screen. Please help. game.js index.html
  10. Part 6 of my tutorial series on making Slither.io is here! https://loonride.com/learn/phaser/slither-io-part-6 Check out the demo: https://loonride.com/examples/slither-io/part-6/ Enjoy!
  11. Hi! I can access the x parameter on this.draw() function, why it doesn't work on this.updateRotation()?? After I create a Shooting Module on my game loop I can access the getX(). What I am missing? function ShootingModule(_canvas){ this.x = 200; this.y = 500; this.radius = 16; this.rotation = 0; this.canvas = _canvas; this.color = "blue"; this.draw = function (context){ context.beginPath(); context.translate(this.x, this.y); context.rotate(this.rotation * Math.PI / 180); context.arc(0, 0, this.radius, 0, Math.PI * 2, true); context.fillStyle = this.color; context.fill(); context.fillRect(-6, -this.radius -6, 12, 12); context.stroke(); context.setTransform(1, 0, 0, 1, 0, 0); }; this.updateRotation = function(e){ console.log(this.x); this.rotation = Math.atan2(e.clientY - this.y, e.clientX - this.x); }; this.update = function(){ }; this.getX = function(){ return this.x; }; } In my main loop script: playerShootingModule = new ShootingModule(canvas); canvas.addEventListener('mousemove', playerShootingModule.updateRotation, true);
  12. PhaserJS - Creating Grid Layout

    Hello Team, I wanna ask if there are some way to create a grid, for example, i would like to create a 4x4 grid, and each grid i will insert an image, is this possible on PhaserJS? Thanks
  13. [Legacy] Infinite Gears

    Hi guys, I want to share my game project that I have created in 2013. It was developed for 2 months but unable to finish it due to some unavoidable circumstances. Introducing Infinite Gears! Infinite Gears is an open-world, survival, 2D space-shooting, bullet-hell game (Whew!). As a Player, you can select a spaceship and start wandering through planets and destroy enemy motherships who are taking over those planets, while also fighting against some small enemies along the way. Each spaceship has its own power. One that focuses on pure power, one that focuses on single-target, and one that can protect itself from enemy attacks. As the Player saved a planet, Player can start buying upgrades so the ship gets stronger. The upgrade cost scraps you got from defeating an enemy. The scraps are then converted into GEARS to buy upgrades from the shop. There is an Overdrive (O.D.) bar that is generated by killing enemies. If this is triggered, it will grant you maximum power of that spaceship for a limited time. The enemies also get stronger as you go further away from where you start. This is indicated by the map on bottom right. There are sectors that are determined as levels to indicate that there will be more enemies and stronger enemy motherships. You must eliminate them as much as you can, and see how far you can go! The game should work on desktop browser at least IE9, Chrome, Firefox, and Opera. How to Play Clone or download this project, extract, and go to the project folder. Inside the ./bin folder, run the index.html. Use ASWD to move the spaceship. Use LMB (Left Mouse Button) to shoot. Use Space bar to throw off the bomb. Attack target is based on the mouse cursor. Last Note The game project was developed by Annobox (me and the illustrator) around June - July 2013 (2 months) for a competition and was still in development, but is no longer continued since then. This project is open to use for everyone, but for more detailed on the copyright notice, please visit the link and read the README.md file. The development is discontinued until now, so there won't be any fix. JavaScript has changed so long since this project and I have my latest code been changed a lot since then, especially after ES6 gets global. So I hope you enjoy the game and the source code! Source Code https://github.com/alectora/infinite-gears
  14. This is a project that I have been working on for a year or so. It is a game development studio equipped with a pixel paint editor, map editor, code editor, game engine, store, and message board. It is even possible to edit the source code of the app via a built in editor. My motivation for creating this is to create a tool that I can use to create my games and share with others. Something like Mario Maker. This project is written 100% in JavaScript and uses Electron as a platform to run. Francois DIY was once a web site but due to network lag and downtime I made it native. Anyways, would like to share and maybe have level built for me! Access online: http://www.francoisdiy.com Video of Project in Action:
  15. Part 5 of our series has arrived: https://loonride.com/learn/phaser/slither-io-part-5 Also check out the demo for this part: https://loonride.com/examples/slither-io/part-5/ In this part you will learn how to add those awesome eyes to your snakes!
  16. Hey everyone so I started my venture into programming months ago and started out with game maker language but didn't think I would ever get a job writing games in GML and so I stopped learning it and started learning HTML CSS and just recently 3 months or so ago got into what I thought would be super scary JavaScript, I dabbled in all the languages I could tbh and they all seemed so daunting. I didn't know what to do so I went back to HTML, CSS and JS. I think I understand JavaScript at a beginner level. My question how ever is.Is trying to study HTML5 game development as a sole hope to get a job doing it viable? I mean I can sit here and learn more on making websites but its not really my interest at all. I love games, playing em coming up with ideas to make em all of it. I would of learned Unity or Unreal but C# and C++ seemed so confusing to me, I like how JavaScript writes it just makes sense to me. But then when I start to make games and I've made some with tutorials with the Phase framework. I just get confused if I try to do it on my own. With Phaser I've done many many tutorials but I still can't seem to set out and just write it on my own. I just want to be able to one day make a game and have some kid stumble upon a kick ass browser game like I did years ago when I saw my neighbor playing Tibia and later RuneScape and thought it was the coolest thing ever. I know that RuneScape was originally written in Java and now C++, and Tibia was always a downloaded game idk what language it was written int but it does have a browser option now and I think thats amazing. Great games accessible anywhere with no download. Sources I've used to make games with Phaser Zenva Academy Interphase From Null to Full Lessmilks 2d Platformer Lessmilks Flappy Bird And I've even learned to just make games on the canvas with these 2 sources (no game engine.) GameKedo Intro to Canvas GameKedo Follow Up to beginner course Basically What I'm asking is if I should continue down this route and try to flesh out my skills and get a job for game development and what other sources or routes can I take to get there?
  17. Cannon JS Problems

    Hi all. I'm not really new here, but technically I am since I haven't logged on in about 4 years. I need some help fixing this cannon JS playground I created. 1st thing's 1st. Why are all the spheres rendering slowly once they touch the ground of the terrain height map? I want this to run at a persistent 60 Frames Per Second. Second thing. I want to have the camera as a "player" in which he can walk all around the heightmap terrain and up NON-STEEP slopes where he slowly slides down STEEP slopes. Forgive me if I'm being a little too less descriptive. I will try my best to explain if that is the case. Anyways, thank you ALL VERY much for all the help! <3 Here is the link to the playground : https://playground.babylonjs.com/#7JDXMW#22 Mythros
  18. I am looking to hire a HTML5 game developer to build Snooker and Billiards games. This is a paid assignment, we can work on a fixed fee or on hourly basis. Please mail your interest and portfolio to ram@digient.in
  19. I have a two player mini game, with all the main logic happening in this: function SpriteDoObj(player){ // global function this.player = player; this.atk = function(opponent) { this.opponent = opponent; if (this.player.overlap(opponent)) { //call miss sound here console.log("miss"); return; } else if (this.isSameAtkPosition(opponent)) { //call block sound console.log("block"); return; } else { console.log("hit!"); //call damage sound opponent.health --; } }; } //has been simplified And I make two instances of SpriteDoObj with: this.blueSpriteDo = new SpriteDoObj(blue_player); this.redSpriteDo = new SpriteDoObj(red_player); //.. also the players are made like this: this.players = this.game.add.physicsGroup(); var red_player = this.players.create(window.innerWidth, this.world.height - 490, 'red_spritesheet'); var blue_player = this.players.create(0, this.world.height - 490, 'blue_spritesheet'); And the atk function is called like this: if (blue_keyMap.atk.isDown) { this.blueSpriteDo.atk(this.redSpriteDo); //the parameter for the atk function //passes the opposite player, that becomes the opponent } The error is phaser.js:47751 Uncaught TypeError: displayObject.getBounds is not a function And I'm not sure why this is happening, mayhaps something to do with how I'm passing the objects around, but it looks good to me - though I'm a noob. Any Ideas?
  20. Hello everyone ! I made a memory game called Click&Match using Phaser.io . It is a cordova based html5 app developed using Intel XDK. This is my very first game. You can download it on Play Store here https://play.google.com/store/apps/details?id=com.MightyRobot.ClickAndMatch Please be sure to rate and review if you do download.
  21. Is there a way to call specific function or event when render finishing with rendering specific sprite or event when shader is executed ?
  22. overlap

    hey guys hey i am new this , i am making a game and in this game i wanted when the player overlap with the coin, the coin disappear but its not over for some reason and i don't why. i have tired a lot of ways even i tired asking the coin into a tile when i made the map but even than it still doesn't work this is my code var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('level12', 'res/level12.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('sprite12', 'res/sprite12.png'); game.load.spritesheet('dude', 'res/player.png', 64, 64); game.load.spritesheet('droid', 'res/droid.png', 32, 32); game.load.image('starSmall', 'res/star.png'); game.load.spritesheet('coin', 'res/coin.png',32,32 ); game.load.image('background', 'res/sprite3.png'); } var map; var tileset; var layer; var player; var facing = 'left'; var jumpTimer = 0; var cursors; var jumpButton; var bg; var coin; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#000000'; bg = game.add.tileSprite(0, 0, 800, 600, 'background'); bg.fixedToCamera = true; map = game.add.tilemap('level12'); map.addTilesetImage('sprite12'); map.addTilesetImage('coin'); map.setCollisionBetween(1, 12); map.setCollisionByExclusion([ 13, 14, 15, 16, 46, 47, 48, 49, 50, 51 ]); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); coin = game.add.group(); coin.enableBody = true; coin.physicsBodyType = Phaser.Physics.ARCADE; createcoin(); game.physics.arcade.gravity.y = 200; player = game.add.sprite(150, 900, 'dude'); game.physics.enable(player, Phaser.Physics.ARCADE); player.body.bounce.y = 0.2; player.body.collideWorldBounds = true; player.animations.add('left', [3,2,1,0], 10, true); player.animations.add('right', [4,5,6,7], 10, true); game.camera.follow(player); cursors = game.input.keyboard.createCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); game.physics.arcade.overlap(coin, player, killcoin(), null, this); } function killcoin(coin,player) { coin.kill(); } function createcoin() { coin = game.add.sprite(50,700, 'coin'); } function update() { game.physics.arcade.collide(player, layer); player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -150; if (facing != 'left') { player.animations.play('left'); facing = 'left'; } } else if (cursors.right.isDown) { player.body.velocity.x = 150; if (facing != 'right') { player.animations.play('right'); facing = 'right'; } } else { if (facing != 'idle') { player.animations.stop(); if (facing == 'left') { player.frame = 0; } else { player.frame = 5; } facing = 'idle'; } } if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer) { player.body.velocity.y = -250; jumpTimer = game.time.now + 750; } } function render () { } if anyone can help would be great Regards
  23. Hi All, I am a JavaScript developer with more than 7+ years of experience on HTML5 game development, i can work on game development for multiple platforms. I can work on projects with limited timeline and budget, available for both part time and full time. Regards, Gideon
  24. 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/