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 3
    • Phaser 2
    • 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 110 results

  1. Hi, We're looking for an HTML5 games developer to help with a very simple soccer penalty game. Needs to work on an ipad and iphone. Looking for someone who is able to animate. please PM if you are available to help Thanks!
  2. Drag and dropping in a container

    Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  3. Yo @Deltakosh I see your samples now using this new BABYLON.GUI stuff. What is the main reasons for using this babylon gui vs using regular html markup for NON-3D guis, like huds etc. I can see when you need to attach some 2D gui to a 3D Object in the scene. But if is just SCREEN OVERLAY stuff like sliders and buttons and text... What advantage does BABYLON.Gui have over regular HTML markup ???
  4. Good morning guys! I've to load a HTML page (rules, instructions, settings, ecc...) inside my Phaser game, how can I reach this goal? Can I control that page with Phaser buttons? Can I render some Phaser button inside this HTML to manage the settings? I need that is a HTML or PHP page to be reachable and visible even outside the game.
  5. Canvas Tilemaps - Javascript Help

    Ello guv'nors! GOOGLE HAS FAILED ME! I got some dumb probably really easy javascript things I'm stuck with and I'm in an endless loop of eh? So I've got the this array 0 = wall = cant move into 1 = path = can move into * white 1 = player start point var gamemap = [ 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, im also abit lost on how to make the character use a nested array two values on each? merge two arrays together? concat? idk... use of north east south west buttons that move the player one array over? on the click of a button CHECK show text saying if can or cant go in direction because wall etc Anyone fancy pointing me towards the right direction? If this makes any sense.
  6. It seems that to send a private message to a player, you are supposed to use socket.to(socket.id).emit. I need to emit an image to a specific player so am using this concept, however it doesn't seem to work. Would anyone know how to emit an image to a specific client? Thanks!
  7. If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs
  8. Hello, Why does the link to scene.js go below the canvas tag and not in <head> like other scripts? I'm not going anywhere with this, just I am curious (and not experienced in js). Thank you.
  9. Hi! We need to develop a short HTML game for a website and a small museum installation with 3 different activities and difficulty levels, for touch-screens (must be played with touch) with a base resolution of 1920x1080; our main priority is to have that game ready for the exhibition. Would be great but not imperative: to make the game responsive (scalable to display proportion) based on device. All the groundwork and design has been completed, and we have a first "test" developed what you could take or not as an advance. We are based in Guadalajara México and we have a very tight schedule for this project, please get in touch with me if this project matches your skillset and you are available for the next 2.5 weeks.
  10. I was wondering if anybody knows how could I go about rendering an iframe over a plane. As far as I understand that's not possible with textures, like we do with images or videos, but I found http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ , where he archived the result I'm looking for with threejs. I was wondering if there is something like the CSS3DRender for Babylon.
  11. 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>
  12. 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?
  13. 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!
  14. 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?
  15. 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>
  16. 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
  17. 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
  18. 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.
  19. 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 ?
  20. 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
  21. 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(); } }
  22. 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); }
  23. 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); }
  24. 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(); }
  25. 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() { }