Search the Community

Showing results for tags 'html'.



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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 100 results

  1. Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src="https://cdn.jsdelivr.net/npm/phaser-ce@2.9.1/build/phaser.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(game.world.centerX, game.world.centerY, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'}); clicker.events.onInputDown.add(listener, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  2. Hi Folks, I'm trying to build a Babylon app that will potentially pull in external content, and some of the content would be very easy to present if I were able to put rendered HTML inside of my Babylon scene. Is it possible to render some HTML in Babylon? Possibly as a sprite or a texture on a mesh?
  3. Hello guys! TL;DR: I'm seeking for team mates to build space 2.5D top view multiplayer deathmatch game with machine intelligence. I have working on "cruiserwars" game for a while. When I started it was huge plan for things which I want to have in this game, but getting fail by fail I realize situation. Right now I can say, what exactly can be done, why I'm making this features and can describe product's vision in three phases. My game is huge and I figured out that will be better to separate it to several small games as united products. First game I want to introduce there to find team mates, form a team and lead development to transform idea to real product. "Cruiserwars Arena" You have been involved in infinity war against others by playing for AI race in distant space in one of the space sectors. By following your main instinct, your role to get maximum amount of kills to keep your intelligence in cluster's database. Soon, main CPU will use your grabbed data for production of determination fleet against humans. Phases I. Infinity battle in a sector against bots. It will be first release with offline game mode, where you can fight against smart CPU built on top of machine learning technology. As a player you should take a first place in leaderboard with higher score of kills, but your scores will be flushed when if you die. Share with your score in social network and invite friends to play for higher score. II. As CPU become smarter, other players are too involved in battle as you. You should be really mastery to kill other players and bots and get higher score in leaderboard. Invite you friends in a game, fight against multiply enemies and show who is a best CPU ever made. III. You found that scores are data which can improve your skills and technologies. Use scores to enhance your spaceship details: cabin, wings, thrusters, turrets and other parts of your spaceship can become better look and performance. Show your spaceship's design and power and become first in leaderboard. Key features – Customized and destroyable spaceship's parts: wings, turrets, thrusters and sub-systems; – CPU becomes smarter by playing with you and other players by utilizing machine learning technology; – Leaderboard and unique spaceship's parts for winners; – Play through the browser, even from your mobile / tablet device along with desktop, anytime you want; – This game is only part of something upcoming (part of the bigger game). Already has As browser multiplayer games are still not investigated yet and there a lot of work should be done before implementing real features, better to say not a lot! – Scene management, assets loading, assets storage, set up lifecycle actions for your scene loading and switching; – Entities, commonly renderable objects on your scene, beside each of them has an actor who control the entity; – Actors, it's part of the logic which can manage input controllers and entity which they applied too (for ex.: PlayerActor and NPCActor); – Keyboard, mouse controllers; – REST services to retrieve information about specific player, sector and spaceship (client-side only with mocks). and other small features.... You see that a lot of features almost technical implementation of architecture. I'm worried about clean code which can be scaled soon, but as time is going and I'm prefer do not write tests on current stage. Tools and libraries – Javascript ES6-7 (Babel) with OOP way programming; – Webpack 2 for bundle building; – Node.JS webserver, node.js game server and node.js microservices (koa/express); – React to build user interface, server-side rendering behind the scene; – Pixi.js rendering engine to show graphics; – ESlint for code quality; – Axios and WebSocket API for communication; – MongoDB, redis to keep users data; – Passport.js for authorization process; – SCSS + postcss autoprexifer; – Docker to build images; – Amazon AWS as end delivery platform; – Realtimeboard.com, skype, trello for visual communication and task management; Who is needed to accomplish the game? Hero #1 – Digital artist You will be responsible for drawing sprite graphics and leveling. For example to draw different parts of spaceships, asteroids, backgrounds with description of each of your work for end customer. Hero #2 – Machine learning back-end node.js developer You will be involved in development of game server and AI machine learning system, set up connection with mongoDB and redis. Hero #3 – Sound composer Write sounds for lasers, thrusters, explosions and other more, beside you will be engaged in development of music tracks for battle scenes. Hero #4 – Javascript front-end developer Build user interface for game elements, build FX and game logic on client side. Requirements – Experience building stuff based on your role, some resources to show; – Desire to build game by using best practices, do not make anything without understanding why are you doing this; – Listen for team-mates, follow direction of the product's vision; – Time to work with game more then 5 hours per week; About my self My name is Andy, I'm trying to make massive multiplayer space game in browser with absolute freedom. Before I have made a lot of experiments and right now time to make real game product with goal to get budget for next development. I'm working in banking sphere for several years at role of software engineer and basically spend my free time after work for game development. There, I want to show my self as product owner to enroll the business part of the game, beside to build top-notch visual solutions for a game as a developer. Better to say I'm working with both front-end and back-end part, with design of user interface and project management. What you will get if enjoy development? – Of course international experience, portfolio, knowledge; – Your own game and money at the end of development as shared revenue between all of team mates; – Team and partners who will help you in building your ideas in real; – Use last top-notch techs such as machine learning, did you ever dream to build killing machines? You are welcome. – Chance to get your own place in game studio if project will succeed. Contacts Skype: AndyTyurin Email: andy.tyurin@gmail.com Thanks for reading, sorry for mistakes, I'm not native speaker. Hope you deals are going well, continue to have a nice day!
  4. I have to add lengthy instructions (3 pages, with examples and images, possibly with one animated GIF) to a game I'm building using Phaser framework. The instructions will be shown by clicking "Instructions" button on the game title page (title state). How do you usually do that? Should I use bitmapText for paragraphs of instructions? I'm thinking about showing them in html format in a DIV the same size of the canvas with canvas hidden behind it. What is more practical? Any suggestions?
  5. Whenever I upload it, it says it can't find phaser+all the levels! Here is the index.html code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>The Adventure of Bleekofla</title> <script type="text/javascript" src="phaser.min.js"></script> <script type="text/javascript" src="loader.js"></script> <script type="text/javascript" src="Start.js"></script> <script type="text/javascript" src="ref.js"></script> <script type="text/javascript" src="ref1.js"></script> <script type="text/javascript" src="ref2.js"></script> <script type="text/javascript" src="intro.js"></script> <script type="text/javascript" src="battle.js"></script> <script type="text/javascript" src="house.js"></script> <script type="text/javascript" src="Level1.js"></script> <script type="text/javascript" src="Level2.js"></script> <script type="text/javascript" src="Level3.js"></script> <script type="text/javascript" src="Level4.js"></script> <script type="text/javascript" src="Level5.js"></script> <script type="text/javascript" src="Level6.js"></script> <script type="text/javascript" src="outro.js"></script> <script type="text/javascript" src="cred.js"></script> <script type="text/javascript" src="old.js"></script> <style type="text/css">body {margin: 0;}body{ background-color:black; }</style> </head> <body> <body background="assets/plumbus.png"> <script type="text/javascript"> var game = new Phaser.Game(1080,560, Phaser.AUTO); game.state.add('loader', loader); game.state.add('ref', ref); game.state.add('ref1', ref1); game.state.add('ref2', ref2); game.state.add('Start', Start); game.state.add('intro', intro); game.state.add('house', house); game.state.add('battle', battle); game.state.add('Level1', Level1); game.state.add('Level2', Level2); game.state.add('Level3', Level3); game.state.add('Level4', Level4); game.state.add('Level5', Level5); game.state.add('Level6', Level6); game.state.add('outro', outro); game.state.add('cred', cred); game.state.add('old', old); game.state.start('loader'); game.lives = 3; game.levels = 1; game.plubs = 0; game.spawns = 0; </script> </body> </html>
  6. Difficult Task

    Hey Guys I am currently struggling significantly with a task, I have my canvas with 38 sprites in, which you pan across each is set up with these values; staffnum = 38; staffs[staffnum].name = "Dave"; staffs[staffnum].description = "Description: Dave is cool"; staffs[staffnum].title = "Title: Dave's Title" staffs[staffnum].image = "Images/TinyPNG/Dave.png"; staffs[staffnum].department = "Dave's Tech" staffs[staffnum].position.x = 23.3; staffs[staffnum].position.z = -0.2; staffs[staffnum].position.y = 5.65; staffs[staffnum].isPickable = true; staffs[staffnum].size = 3; I currently run through the array and can pull the data values for each.name .description and so on... with a mouse click, so when you click a sprite it opens a modal box in html over the top of the canvas with that image and the values pulled through and displayed, then you can close the box and return to canvas. The task I am trying to accomplish, is when my mouse cursor is hovering over someone, i want to display there .name and .title value that's being created in my js file through and display above the cursor so you can see who you are hovering over basically. I currently cannot find a way of completing this task, if anyone could make a simple playground, code pen, whatever platform with a small demo of this in affect that I could use to understand and then apply to my work? My build is seperated into multiple files currently so making a babylon playground isnt possible, but if need be i can provide a link to my build folder for download, THANKSSSS Mezz
  7. Mouse Hover Events

    Hey everyone! I wanted to get a bit of help getting a function working whereby when I hover my mouse over character sprites it will show a there name and title just above the mouse position for each different sprite, I'm unsure if I need to look at going down the route of a mouse hover/mouse over function or i need to create an event listener. If anyone could make a demo that I could play with and learn from or something that would be perfect! Thanks guys! Mezz
  8. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  9. interface html

    Hello, i'm trying to create a configurator for furniture based on this model : https://xboxdesignlab.xbox.com/fr-fr/customize?productid=900WZDF9XJVG but i didn't find how to create the ui on the right. Can we interacte whis the scene with html ? if its possible how do i do ?
  10. [Help] Access function in html file

    Hello there, I am relatively new to game development. I have defined a function ShowAds() within the html index file <script type="text/javascript"> var version = 'dev', libs = [ ]; var game = new StuddGames.AppBoot(); function ShowAds() { console.log("Show Ad"); } </script> is there a way i can call this function from typescript within the game code? Thanks for your help
  11. 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(); } }
  12. 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); }
  13. 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); }
  14. 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(); }
  15. 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() { }
  16. 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>
  17. 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
  18. Hi guys, I just wanted to show you my latest Phaser app, Pop Pop Bubble Wrap (I know it's simple but I just wanted to get back on track, I haven't coded a Phaser app since the end of 2015). Pop Pop Bubble Wrap is an infinite bubble wrapping popping simulator designed to reduce one' stress and anxiety. You can find it here: iOS: http://apple.co/2uWzooG Google Play: http://bit.ly/2uhg6IJ Website: http://popbub.eu/ #indiedev #indiegame #gamedev #roninmobile Let me know what you think! Regards!
  19. Hi I'm developing an Opensource tool(Wrappit temporary name) for wrap up the HTML,HTML game to run in Window Application , by using Chromium engine. The tool will provide JS binding some command to manage some feather of Window app such as ScreenSize , Maximize , File Access and other. Additional is version management tool able to update html file in local. I wanna know your opinion any suggestion or require any feature about this project.
  20. Hello everybody! I hope you are having a great day! I have recently build a prototype for my new phaser.js game. It's a simple runner where the player has to avoid obstacles. I have tested it in multiple environments, including mobile browsers and webviews. The game refuses to run smoothly like I want it to. I have experienced lags, loosing frame rate and total unresponsiveness. So here I am, begging for your help and advice, what am I doing wrong? How can I make my game run smoothly? Is my update loop simple enough? Anything help guys! Here is the source Play it here (don't forget to switch to a mobile view) Thank you in advance! This community is awesome
  21. Node.js Multiplayer Simple Game

    https://drive.google.com/folderview?id=0Bwl58NPLObeIWEQ3YlNlTV9KNWs Here's a sharable link to the directory where my files are located. There's no node_modules, so it's necessary to install before express and socket.io. The problem is I can't create and render the balls which need to bounce all the time. The server is responsible for creating my players and balls. I did successfully the creation and movement of my players with the arrow keys and that's synchronised to all the clients. But I can't do the part with bouncing balls. It seems simple game but as far as I am new to this stuff, I can't figure it out. I provide a link to the directory of my files. The command to start the game is: node server.js. If anyone could help me, I would be very happy. Thanks in advance guys.
  22. How to add controls to image/sprite?

    So to get right to the point. I am having issues with my ship image/sprite and my drawn objects on screen disappearing as soon as I try and addEventListener to code. why does my code essentially break when i add the EventListener? is it not possible to add controls to image or sprite within Html canvas? Ship game code = https://codepen.io/BlaineP16/pen/VpQBZV
  23. No Longer Needed.

    No longer needed.
  24. small games

    Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Marble labyrinth Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: http://codepen.io/Gthibaud/full/zNwgmZ/ 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: http://codepen.io/Gthibaud/full/MJqgzv/ 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: https://codepen.io/Gthibaud/full/ryQRYP/ 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link : https://codepen.io/Gthibaud/full/aWLjKL/ 5/ Taxi Apocalypse Created NOVEMBER 06, 2017 Link : https://codepen.io/Gthibaud/full/WXxMdb/
  25. Hello, I'm a web programmer with 3 years of experience (currently a senior developer). I've always been a fan of videogames and now I'm starting learning game development just for fun. Like in any type of development , you always face problems and learn of those. Sharing is the strongest tool to learn, you help other people to prevent/fix mistakes and they help you. What am I looking for?: People like me that is learning to develop games and want to meet other people to make games with them, share experiences, ask&answer questions. How will we organize? I have experience managing large Telegram groups and also creating bots for groups. It is a good starting point since most of the people always carry the phone everywhere and also has a web/desktop application, also Telegram offers us a direct communication without compromising your privacy (you don't need to give real info or phone number to the rest of the group). If we start growing, we can just move to another platform you want (Discord, Slack, whatever is of your preference). Do you have any project scheduled? Yes, I want to build a fun roguelike, here is my current roadmap of the game: I am an artist, can I join? Sure! I'm sure you can learn from us and we can learn from you, Keep in mind that sound artists, level designers, programmers.. work together and they need to understand all the other positions to work properly. Of course this is a flexible diagram, I don't do this as my job and I don't have any deadlines, creating a roadmap just helps me with organization so I don't start wrongly (which with end even worse :P). Have in mind that my only goal is just learning, I'm not in a rush to make money or finding a job Just feel free to contact me if you want to join or if you doesn't like something of my post.