Search the Community

Showing results for tags 'spritesheet'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 118 results

  1. So today I come asking for help. I'm converting from a Flash Developer over to JavaScript and I'm using CreateJS, I wanted to know if anyone had recommendations on how I could export my sprite sheets so that it's a little easier to assemble in CreateJS. How I make my characters in Flash is I have the main character MovieClip and I have a nested MovieClip for mouths. The main character MovieClip may have animations so on every frame where the character talks I have a nested mouth clip container(I have provided a video clip on how the animations plays without mouth interaction by code: https://youtu.be/TJOAME7MvgI - and how it acts with interaction: https://youtu.be/XCODle6ocvs). Does anyone know the easiest way to export the animation from Flash and the mouths? I was gonna do the animation on a separate SWF and export it to a separate sprite sheet then for each frame do each set of mouths as a sprite sheet and just show them when it gets to that frame in CreateJS. But how I've been making these so far is the mouths are done by frame on the timeline. In flash I did it like this too but also did them on layers, so if the mouths were on layers it be character.mouths.A_mc.visible = true; and set the last one's visibility to false...if I did it by frame I'd just do character.mouths.gotoAndStop("A"); and this is currently the only way I'm doing in in CreateJS. If anyone has been following along so far lol some suggestions would be great on how you would tackle this!
  2. I have canvas 1920 x 1080 and 5 different Spine animations that uses a lot of textures. Add 20 animations of every type all over the screen Test performance in two ways. For this I use GPU-Z and check GPU load parameter 1) Every animation has its own atlas with images and json file - GPU Load 47% 2) Every animation has its own json file but uses the same atlas with images - GPU Load 61% Made the same tests with sprites as well, total amount of sprites is 180, 10 of each type. 1) Each sprite has its own download link - GPU Load 90 % 2) All textures are in the same spritesheet - GPU Load 63% Why tests with Spine have opposite results? PC config is Google Chrome v65, Windows 10, AMD Radeon HD 7450, Intel Xeon x5650
  3. so I created a spritesheet online and and added to my game. but some sprites are small in size so how do I change the size of sprite: { "filename": "Attack__004", "frame": { "x": 1, "y": 1951, "w": 111, "h": 96 }, "rotated": false, "trimmed": true, "spriteSourceSize": { "x": 9, "y": 5, "w": 111, "h": 96 }, "sourceSize": { "w": 120, "h": 110 }, "pivot": { "x": 0.5, "y": 0.5 } }, I don't know which one is the height and width of image. So do can I resize the image inside the json file or I must manually resize and pack it again? Btw, I used this tool http://free-tex-packer.com/app/ (no PC to use texture packer :-) ) Thanks in advance
  4. What is the difference between using spritesheet and jsonHash ? jsonHash need a json file and spritesheet does not - this is what I know so far. But why use jsonHash with all that extra work to make a json file when you just can use spritesheet instead?
  5. I use sprite sheets to take care all the animations in a web game. I have some really big sprite sheet with a size of 14450x5406 and the game will be so laggy when I'm trying to render this into the stage. Since it is a response time vary application which require a no-lag performance, I decided to split those sprite sheets into multiple sprite sheet such that each of them with a size of 2048x2048 after I've read some post as below: The performance is better than before in the first play of the animation. Let say if the application will 100% chance become laggy in the previous, it's just 50% now. However even the animation is smooth in the first play, It'd become laggy if I gonna render it again after 2-3 minutes(It's still smooth if I'm rendering it again immediately) . So splitting the large sprite sheet into multiple sprite sheets may helps a little bit on laggy issue but still the problem exists and I couldn't know the reason. I play all these huge size animations right after another animations(small size): By laggy I am meaning that the Chrome is like totally freezing. I read some posts and some of them said that it's because GPU can't rendering anything while uploading texture into GPU. So I've posted another question in the past: So I prepared all the animation sprite in a loading screen and turned off the GC with the following code: But the same thing is happens. The Chrome is freezes every time when playing the animation with sprite sheet of large size(freezes happens on entering onComplete), not on the small one. I would like to know any possible reasons and suggestions about this issue. If this cannot be solved in programming level, could I resolve this in hardware way? like buying a better graphic card with more video memory?
  6. I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.
  7. I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here bubble.animations.play('pop', 10, false, true);
  8. Hi Guys How can i play spritesheet animation using javascript.
  9. Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either. // The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet} // containing the animation definitions: PIXI.loader.add("assets/spritesheet.json").load(setup); function setup() { let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet; animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]); } Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help. EDIT: I attached some pictures that showcase my issue.
  10. In Phaser 2 I was able to load a spritesheet and then define a simple animation that would loop through the spritesheet frames. // Defined in the preloader state. this.load.path = 'assets/avatar/'; for (let i = 1; i < 8; i++) { this.game.load.spritesheet('avatar_1_' + i, 'base/avatar_1_' + i +'.png', 16, 24); } // Use the spritesheet when adding the sprite. this.hero = this.game.add.sprite(x, y, 'avatar_1_' + style); // Define an animation and start playing it. this.hero.animations.add('stand'); this.hero.animations.play('stand', 5, true); With Phaser 3 I'm trying to understand how to convert this to the new animations model. // Still loading the spritesheets in the preloader. this.load.path = 'assets/avatar/'; for (let i = 1; i < 8; i++) { this.load.spritesheet('avatar_1_' + i, 'base/avatar_1_' + i +'.png', { frameWidth: 16, frameHeight: 24 }); } // This doesn't appear to have changed much either. this.body = this.scene.add.sprite(x, y, this.asset); // Now I've tried just creating the animation: this.anims.create({ key: 'stand', frameRate: 5, repeat: -1 }); // And then using it on the sprite, but it's complaining about that it: // Cannot read property 'frame' of undefined this.body.anims.play('stand'); Is it still possible to define an animation that just loops through the sprite's spritesheet's frames? If not, do I need to define an animation for every spritesheet I'm using? (Such as in the official Phaser 3 tutorial, https://phaser.io/tutorials/making-your-first-phaser-3-game/part5) Thanks!
  11. Hello, I'm trying to make a game with different states : The first one is the main state (Play.js) where the game is running and I have a second state (Skills.js) to create a Skills Tree. To keep track of my variables I store the data into two JSON file and I pass them when I'm changing state like that : Play => Skills this.game.state.start('Skills', true, false, JSON.stringify(this.gameObject), JSON.stringify(this.skillsObject)); Skills => Play this.game.state.start('Play', true, false, JSON.stringify(this.gameObject), JSON.stringify(this.skillsObject)); However, I have a timer which displays the remaining time and a menu bar in Play.js and I would like to keep displaying them in Skills.js. I made some research and I could turn the "clearWorld" parameter to false but this will keep displaying the others spritesheets and I won't want that. So, how could I do that ?
  12. Hello, I'm making a racing game (at least I'm trying to!) I'm using a setTimeout function to delay the start of the scrolling of the background by 3 seconds which works perfectly! But, what I really need now is to display an image of "3" *pause & fade out*, switch to image of "2" *pause & fade out*, switch to "1" *pause & fade out* then show "Go!" * fade out* I saw something where I set the alpha to 0 and then tween the alpha to 1 like so: game.add.tween(this.countDown).to({alpha: 1}, 1000, Phaser.Easing.Linear.None, true, 0, 1000, false); But this isn't exactly what I'm looking for. I'm not sure what all of these parameters are or how I would switch between the images (using different images or a spritesheet, I'm not sure what's best) to give the desired effect. Can someone please help me? Many thanks, and let me know if you need me to explain this better! Update: I kept hunting around (I apologize for not searching more thoroughly) but, I did come across chaining tweens. I'm trying it out but having some difficulty
  13. I have a spritesheet of 7 equal size sprites (50x50). When I try to call a specific frame ('6') to assign it to a variable, i get half of sprite 5 and half of sprite 6 showing. I'm using Texturepacker Pro with, I think, the correct settings, so why am I getting half of the frame instead of the full frame? figured it out: i had to add some boundary around the sprite in the original load line.
  14. Hi guys, I just started coding using Phaser and so far, i'm really loving it. So, i'm creating my new game which has a main menu in it and I don't really know where to begin. I know there are lots of packages out there but I would really like to know the basics first before I dive into using tools that are basically "magic" to me. I have tried reading through the code of EZGUI to understand how I would get my desired output, but I haven't reached that level yet so it's quite challenging. I have the spritesheet ready which I will be using for the game window (actually any window) that I got from the free Kenny assets: And what I want is for this to look a little like this, the problem is I don't know where to start. And I would like for the panels to be dynamic depending on the size of the content. I understand that creating the windows, panels, etc.. from any image editor and just be static, but scaling them in-game would affect their quality. Any suggestions will do. I'm still new to Phaser and I would not mind trying out any advice you could give. Thanks!
  15. Spritesheet Editor in web Create spritesheets by placing images in cells, set up sizes and offsets of your columns and rows. Download generated JSON file with coordinates of each of your sprite and PNG spritesheet image. Autosave of your progress, sharing, collaboration work; Development of spritesheet is not easiest in terms of 20 or 100 sprites. In case of WebGL games it's quite necessary to have one spritesheet instead of using separated images each iteration of rendering. Tool is useful for designers and developers who are interested in development 2D, 2.5D games. I'm seeking for React developers to build this app for community for free. The project consists of 3 phases. First one gives you main functionality for generating PNG and JSON. Next one will be about keeping information on server-side in database with social network authorization, it will be premium functionality for really cheap 3$/month subscription per account. Last phase will introduce collaboration mode, invite by link and multiply spritesheets management. Please, leave your comments about features you want to have, development already started. Thanks, cheers!
  16. Hi, im new in phaser i have an error in animations when i press de right key i doesnt play the animation.
  17. So I am preloading an atlasXML spritesheet game.load.atlasXML('sheet', 'images/sheet.png', 'images/sheet.xml'); and I can create a sprite using: game.add.sprite(game.world.centerX, game.world.centerY, 'sheet', 'playerShip1_orange.png'); I am trying not to use a for loop to create many sprites for a a sprite group I'm creating by using Group.createMultiple Now if I'm just loading a sprite or image, I can do this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing
  18. hi guys, Is there a way to load 2D-resources as spritesheet in BABYLON, and I can take the frame I want by alias(frame_1.png or frame_2.png)? or if I need to do it myself, where can I set the attributes like clipX, clipY ......to get the part of image I want {"frames": { "frame_1.png": { "frame": {"x":1,"y":1417,"w":93,"h":102}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":5,"y":0,"w":93,"h":102}, "sourceSize": {"w":98,"h":102} }, "frame_2.png": { "frame": {"x":311,"y":1187,"w":84,"h":102}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":13,"y":0,"w":84,"h":102}, "sourceSize": {"w":98,"h":102} }}, "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "image": "sprite_sheet.png", "format": "RGBA8888", "size": {"w":1922,"h":1555}, "scale": "1", "smartupdate": } }
  19. Hi guys I have problems using cross origin resources, as I tested direct load of image is working, but the spritesheet & mp4 I still can't get it work, here is some use cases: // it works var image = PIXI.Sprite.fromImage(CROSS_ORIGIN_URL_IMAGE); // not work and showing the error message // Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded var videoTexture = PIXI.Texture.fromVideo(CROSS_ORIGIN_URL_MP4); var video = new PIXI.Sprite(videoTexture); // my json file is at local, and the image is on cdn server, so I change baseUrl right after add function, the image is loaded successfully, but when I try to use it, it shows the similar message // pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ... may not be loaded. PIXI.loader.add("/src/image/spritesheet.json"); PIXI.loader.baseUrl = CDN_SERVER_BASE_URL; PIXI.loader.load(() => { var image = PIXI.Sprite.fromImage(FRAME_KEY); }); the response header has the property "access-control-allow-origin: *", and the same mp4 URL works fine in DOM element, am I missing something?
  20. 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(); } }
  21. 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(); }
  22. I am trying to learn how to make a sprite from a spritesheet and I'm following Kitty's tutorial as a reference on how to work with spritesheets. https://github.com/kittykatattack/learningPixi#sprites I am using Texture Packer to create my spritesheet. I was successful in exporting all my images the only thing that has me confused is why do I have a .json file for each of my images? I suspect this is because I had to enable multipacking because all my images wouldnt fit on one sheet. In a lot of the examples I've seen online most devs just import one tile-sheet and one .json file. I was expecting Texture Packer to do the same, now I am unclear how I would import all of this...just for one sprite. Is there a better method of doing this? Quick info about the images I am using, I made a 3d render in Blender and exported the final render into .png frames, the size on each frame is roughly 2000x1000. Perhaps there's another way I could export my render and have it ready for PIXI?
  23. 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); }
  24. 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); }
  25. 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() { }