Search the Community

Hi guys! This is my new plugin to horizontal and vertical scrolling http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ PD: nothing to do with Kinect, the old name haha Regards, Nicholls

No matter what I try or how I implement things, I keep getting some jittery scroll movement. I was using the <canvas> tag before this, without PixiJS and it was a lot of jittery movement. Just one drawImage call per rAF-call would take far more than 16,6 ms. I used the <canvas> for drawing frames. But I also used the transform CSS property for instance. With and without CSS transitions. But currently I'm using PixiJS with a RenderTexture and the scrolling still seems somewhat jittery to me, though maybe less jittery. I'm not drawing vector graphics. I'm drawing images (PNG files actually). When an image has loaded I add it to a somewhat large RenderTexture (4096x4096). Because width of the images don't exceed 1024 pixels, I now store the images inside four columns of 1024 by 4096 pixels. I then have a sprite for which I create a Texture (which I recently found out to be just a reference to a BaseTexture combined with a certain frame). Each time I scroll I create a new Texture pointing to the same RenderTexture but using a different frame. Though at a certain point it seems I need two sprites with textures both pointing to the same RenderTexture but with different frames. Because, let's say, when the first frame starts at 4000 and I need about 800 pixels from the image (e.g. 800 could be window height or screen height) I need to have a frame pointing at the last 96 pixels of the first column within the RenderTexture and a frame which points to the other column, getting the remaining 704 pixels. Should this be a proper way of handling this? Or is there a faster way to handle this somehow? Maybe I could make sure to make the height of the columns within the RenderTexture are dividable by the current window height. Though then it would mean some column height would go unused (but then this would probably be true for all columns, so maybe not such of a big deal). And this reordering would then need to happen each time a resize occurs. I guess a large screen size (regarding height) would not work very well with how I'm handling this now? Any advice would be much appreciated By the way, I'm also using a small easing function which I call via setTimeout when there is movement. But the actual drawing takes place currently in the ticker function. It just calculates current scrolling speed, does not draw anything.

I'm rendering the content of some PNG's via a 4096 by 4096 RenderTexture, to cram all of it in the GPU memory, for scrolling usage. As each column should be 1024 pixels wide I can store a maximum of 16384 pixels of height to scroll through. I use 4096 as width and height because of http://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE But what to do if I want more than 16384 pixels to scroll through in one go? Suddenly realised: Should I just use some extra texture(s) of 4096 by 4096? It looks like a maximum of 8 textures is a safe bet: http://webglstats.com/webgl/parameter/MAX_TEXTURE_IMAGE_UNITS Or is there a better approach?

Hey, for my project i need a scrolling text view. I've managed to get a clunky version working but it's not optimal since you have to play around with the values every time the text changes: http://playground.babylonjs.com/#DZ7134 Is there a better way (there must be, i just suck at js :D) to do this? Thanks in advance.

Hi Been working on a top down car game for quite a while and creating my own render using 2d canvas. Looked at pixiJS and decided to update the render with that to get the benefit from webGL and perhaps other nice useful features that I don't know about yet. I create tiles in photoshop, draw the map in many layers in Tiled and then in my game I pre render all background layers and my foreground layers into 2 large canvases stored in memory which I then use to draw what the player sees based on my camera that is tracking the hero. Now that I'm switching to pixiJS I'm confused about a couple of things. I've been searching, and going through some great tutorials, explanations and documentation but still feel I want to ask for some help here. My current setup is that I do the same prerender as before and then add my background and foreground as sprites like this: this.layers[zLevel] = new pixiJS.Sprite(pixiJS.Texture.fromCanvas(this.offScreenCanvas[zLevel])); if (zLevel === 'background') { this.layers[zLevel].zOrder = 20; } else { this.layers[zLevel].zOrder = 10; } this.pixiApp.stage.addChild(this.layers[zLevel]); Question 1: Is this approach recommended (I know this consumes memory and if the map is too big I'll need to split into smaller chunks) ? I'm also confused about sprite vs texture. I could not get my background to show up unless I turned it into a sprite. Question 2: How do I control which layer is on top of the other? I tried in this example to place background above foreground but that didn't work. My cars should be positioned between background and foreground, how do I accomplish that? In my old version I draw my layers like this: this.ctx.drawImage( this.preRender.offScreenCanvas[zLevel], // image camera.x, // source x camera.y, // source y camera.width, // source width camera.height, // source height 0, // target x 0, // target y camera.width, // target width camera.height // target height ); Question 3: How should I approach the camera in pixi? It seems like I should just change x and y of my background sprites to accomplish the same effekt. Is that the right approach? Question 4: When looking at the examples in pixijs: http://pixijs.github.io/examples/#/basics/basic.js or kitty kat attack tutorial: https://github.com/kittykatattack/learningPixi#introduction I keep seeing thing things done different all the time. is one of them out of date? For example in kittykatattack they call renderer.render at the end of each example. /piranha

Hi, First I apologise if this has already been covered but I have searched and searched and not found a clear answer. In basic terms, I am trying to build a horizontal scrolling platformer that resizes as you change the size of its container. The functionality that I am trying to achieve can be seen in the Melon JS engine and results in no blank bars to the left & right or top & bottom. Thanks in advance. David

I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. My background is created using 20 different images who's order must be dynamically changed as the background scrolls. So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth. I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images. I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite. I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile. In another post on this form Rich suggests doing the following: http://www.html5gamedevs.com/topic/3218-continuously-scrolling-background/ I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?

What would be the best way to have a continuously scrolling background? I'm new to JS/Phaser, but the way I would usually approach it would to be have an art based background (not tiled) which is constructed on the fly so to speak from various elements (clouds, buildings, etc). Would that work with JS/Phaser? and if so how would I implement that with Phaser? (Actually I guess tiled might work as well if I could have overlapping tile layers one with big objects and one with small platformy type objects).

hi developers, i am try to scroll in specific game place using the Phaser Kinetic Scrolling Plugin . but its working with game full width and height how to solve this problem?

Hello ! I'm currently making a custom engine in JavaScript (canvas). I already did sprites, particles, events (touch, keyboard, mouse) and a basic script to render tilemaps (no scrolling yet) I want to code the scrolling, camera and world system. If I create a game with a world of 30,000 pixels width and 15,000 pixels height, and my camera is in 800x and 800y for exemple; should I: -Call render and update functions for every element in the world (even if they are outside the canvas) -Get elements who are in the camera to update and render them. - Should I do something else ? What is the best thing to do ? Thanks

Hi There, I am trying to create a sandbox world with tile sprite, where as the player moves left to right and top to bottom, and they only ever see the image once and it doesn't actually tile. I've read that you can do this by setting the world bounds and tile sprite size to the actual size of the image. When I do this it seems to work okay, however the moment I position the player it causes the background to offset in a way where I am seeing the tile repeat, which is not the desired effect. I was hoping somebody on the forum might have some insight or experience with how to do this? I've attached my code to show the problem I'm running into. Thanks for any help with this. 'use strict'; function Level() {} Level.prototype = { init: function() { this.drone = null; this.background = null; this.cursors = null; this.balloon = null; }, // preload: function () {}, initPhysics: function() { this.game.world.setBounds(0, 0, 3072, 1536); this.game.physics.startSystem(Phaser.Physics.P2JS); // this.game.physics.p2.defaultRestitution = 0.8; this.game.physics.p2.world.defaultContactMaterial.friction = 0.3; this.game.physics.p2.world.setGlobalStiffness(1e5); this.game.physics.p2.gravity.y = 100; this.game.physics.p2.restitution = 0.8; }, addBackground: function() { this.background = this.game.add.tileSprite(0, 0, 3072, 1536, 'background'); this.background.fixedToCamera = true; this.background.tilePosition.x = 0; this.background.tilePosition.y = 0; }, addDrone: function() { this.drone = this.game.add.sprite(0, 0, 'drone'); this.drone.animations.add('fly'); this.drone.animations.play('fly', 30, true); }, addContactMaterials: function() { this.spriteMaterial = this.game.physics.p2.createMaterial('spriteMaterial', this.drone.body); this.worldMaterial = this.game.physics.p2.createMaterial('worldMaterial'); this.game.physics.p2.setWorldMaterial(this.worldMaterial, true, true, true, true); this.contactMaterial = this.game.physics.p2.createContactMaterial(this.spriteMaterial, this.worldMaterial); this.contactMaterial.friction = 0.0; // Friction to use in the contact of these two materials. this.contactMaterial.restitution = 1.0; // Restitution (i.e. how bouncy it is!) to use in the contact of these two materials. this.contactMaterial.stiffness = 1e7; // Stiffness of the resulting ContactEquation that this ContactMaterial generate. this.contactMaterial.relaxation = 3; // Relaxation of the resulting ContactEquation that this ContactMaterial generate. this.contactMaterial.frictionStiffness = 1e7; // Stiffness of the resulting FrictionEquation that this ContactMaterial generate. this.contactMaterial.frictionRelaxation = 3; // Relaxation of the resulting FrictionEquation that this ContactMaterial generate. this.contactMaterial.surfaceVelocity = 0; // Will add surface velocity to this material. If bodyA rests on top if bodyB, and the surface velocity is positive, bodyA will slide to the right. }, enablePhysics: function() { this.game.physics.p2.enable(this.drone); this.drone.body.clearShapes(); this.drone.body.loadPolygon('dronePhysics', 'drone'); this.drone.body.damping = 0.5; // this.drone.body.x = 100; // this.drone.body.y = 1400; // this.drone.anchor.setTo(0.5, 1.0); }, initCamera: function() { this.game.camera.follow(this.drone); }, addControls: function() { this.cursors = this.game.input.keyboard.createCursorKeys(); }, create: function() { this.initPhysics(); this.addBackground(); this.addDrone(); this.enablePhysics(); this.addContactMaterials(); this.initCamera(); this.addControls(); }, moveHorizontally: function() { if (this.cursors.left.isDown) { this.drone.body.rotateLeft(100); } else if (this.cursors.right.isDown) { this.drone.body.rotateRight(100); } else { this.drone.body.setZeroRotation(); } }, moveVertically: function() { if (this.cursors.up.isDown) { this.drone.body.thrust(400); } else if (this.cursors.down.isDown) { this.drone.body.reverse(400); } }, moveBackground: function() { if (!this.game.camera.atLimit.x) { this.background.tilePosition.x -= (this.drone.body.velocity.x * this.game.time.physicsElapsed); } if (!this.game.camera.atLimit.y) { this.background.tilePosition.y -= (this.drone.body.velocity.y * this.game.time.physicsElapsed); } }, update: function() { this.moveHorizontally(); this.moveVertically(); this.moveBackground(); } // , // paused: function () {}, // render: function () {}, // shutdown: function () {} }; module.exports = Level;

Hi everyone! I'm trying to make a top down racing game, but I can't find a way to make a proper scrolling background. Every example I find is about tiles but my background is not something I can repeat horizontally. The background image is basically the track, so I need that image to be 100% width and repeated vertically, with an infinite vertical scroll. Can you please give me a hint? Thanks in advance! Damian

So I implemented this piece of code that scrolls around (up/down/left/right) using the mouse pointer. I basically have a map and I am scrolling to see areas that I don't normally see because the canvas size is much smaller than the map itself and that's how I want it since you can zoom in/out too. What do you think about my code and what would you change and how can I make it better? //in create() this.currentX = this.game.input.activePointer.x; this.currentY = this.game.input.activePointer.y; //in update() if(this.game.input.activePointer.isDown && this.game.input.activePointer.x>this.currentX){ this.game.camera.x -= 8; this.currentX = this.game.input.activePointer.x; } if(this.game.input.activePointer.isDown && this.game.input.activePointer.x<this.currentX){ this.game.camera.x += 8; this.currentX = this.game.input.activePointer.x; } if(this.game.input.activePointer.isDown && this.game.input.activePointer.y>this.currentY){ this.game.camera.y -= 8; this.currentY = this.game.input.activePointer.y; } if(this.game.input.activePointer.isDown && this.game.input.activePointer.y<this.currentY){ this.game.camera.y += 8; this.currentY = this.game.input.activePointer.y; }

In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker: http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ I hope it's of use to somebody, and would love to hear any comments about any errors or sub-optimal code. Thanks!

Hi, I built a small top down game using a static tilemap, and i would now like to go further and make the level infinite by scrolling vertically and generating bits of my map on the fly. I checked some of the threads here but did not come up with a solution to my problem, and i am now quite confused: Is it possible to achieve this the way i want to? Should i generate tilemap layers as the map scrolls and destroy them once they cross the screen limits? Was the whole tilemap thing a mistake and should i generate sprites instead? If anyone here has experience on the matter or some solutions to guide me towards my goal i would gladly listen to them

In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker: http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ The code is very much based around Pixi, but it's easy to understand without being familiar with that API, and I thought the article makes enough broad points to be worth crossposting to this general 2D forum in hopes that others may find it useful. Thanks!

Are there any examples of scrolling for Phaser anywhere. Something like the camera following a sprite moving around on an image much larger then the game window. Jason

Hi friends! Who have used my plugin? What did you think? Plugin: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ I would like to give me feedback Regards, Nicholls

Hy guys! I'm trying to simulate the following (With the camera): http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html My demo: http://codepen.io/jdnichollsc/pen/OVZPwx?editors=001 but I'm getting an error, Does anyone know it can be? Regards, Nicholls

Hi, I have problem with swipes on Windows Phone. In our game characters are moved with swipes. It works well on all devices except Windows Phone. On Windows Phone whole canvas is moved when you try to make a swipe. I googled and added "-ms-touch-action: none;" to body style in css and also to div element that holds canvas in index.html (<div id="content" style="overflow: hidden; -ms-touch-action: none;"></div>). Unfortunately, I do not have WP available to test on. The person that encountered problem says, that problem is still there. I would like to ask: did you encountered this? And if yes, what was your solution?

I have an infinitely scrolling tile sprite as the background for my game. I want to use a camera to move instead of creating the illusion of movement by using: bg.tilePosition.x -= player.spd But, since the background is infinite and I need to set the world bounds, it can't be an infinite world. What would be the best way to do this? Thanks

i want to set "this.game.camera.y < 1;" but failed to do so is it possible to slow down the scrolling speed less than 1 i tried 0.5, 0.1 and other fractional figures but less than 1 not works Please help me i got stucked

I am new to Phaser and I am currently working on my first game. I'm am creating a vertical scroller and have come across some performance issues on mobile. I have a 1024x4608 background with some 'land' that needs collision detection with the 'player' and the 'enemies' in the game. I've been trying a couple approaches but can't seem to find the sweet spot with the performance. I was hoping someone would have some suggestions. Here's what I've tried so far: 1) Tilemap this.load.tilemap('level01_map', 'assets/level01_map.json', null, Phaser.Tilemap.TILED_JSON);this.load.image('tiles', 'assets/tiles.png');this.map = this.add.tilemap('level01_map');this.map.addTilesetImage('main', 'tiles');this.map.createLayer('land');this.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);this.map.setCollisionByExclusion([], true, 'land');var bodyObjects = this.physics.p2.convertTilemap(this.map, 'land');for(var i = 0; i < bodyObjects.length; i++) { bodyObjects[i].setCollisionGroup(this.gameGroups.landCG); bodyObjects[i].collides(this.gameGroups.playerCG); bodyObjects[i].collides(this.gameGroups.enemyCG);} 2) Sprite with polygons this.load.image('level01', 'assets/level01.png');this.load.physics('level01_physics', 'assets/level01.json');this.world.setBounds(0, 0, 1024, 4608);this.map = this.add.sprite(0, 0, 'level01');this.map.widthInPixels = 1024;this.map.heightInPixels = 4608;var polygonCollisionSprite = this.add.sprite(15, 15);this.physics.p2.enableBody(polygonCollisionSprite, true);polygonCollisionSprite.fixedRotation = true;polygonCollisionSprite.body.motionState = Phaser.Physics.P2.Body.STATIC;polygonCollisionSprite.body.clearShapes();polygonCollisionSprite.body.loadPolygon('level01_physics', 'level01_left');polygonCollisionSprite.body.loadPolygon('level01_physics', 'level01_right');polygonCollisionSprite.body.setCollisionGroup(this.gameGroups.landCG);polygonCollisionSprite.body.collides(this.gameGroups.playerCG);polygonCollisionSprite.body.collides(this.gameGroups.enemyCG); And here are my results testing on an iPhone 5:Tilemap no collisions = 45fps Tilemap with collisions = 20fps Sprite/polygons no collisions = 45fps evens out to 60fps when less polygons in view Sprite/polygons with collisions = 8fps Sprite/polygons (simple) no collisions = 60fps Sprite/polygons (simple) with collisions = 30fps Note: simple means I reduced the vertices in the polygons. (Simple = 6 shapes, Normal = 44 shapes) The game is setup with 1024x640 in Phaser.CANVAS mode. Also, the all sprite assets, except the stuff for the background, are being load via one atlas texture. Any thoughts?

I am loading a small tile map (created in tiled) and scaling it to be double the size to fill the screen. The scaling works but something is off with the tile layer scrolling. The tile layers scroll on the x axis as the player moves to the right but it stops short of the end of the level (meaning the player continues on but the tile layers stop scrolling short of the boundry). I suspect this is something with my bounds settings but I'm not getting anywhere adjusting settings. Even worse, the tile layers do not scroll at all on the Y axis. Has anyone had a similar issue or a possible fix? I figure its something with the world bounds, camera bounds and tile layer bounds but I'm not getting anywhere on my own. Any help would be appreciated. Canvas settings: width: 1024 height: 768 TileMap settings: Tile size: 32x32 height: 15 (480px) width: 468 (14976px) Screen settings game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.minWidth = 480;game.scale.minHeight = 260;game.scale.maxWidth = 768;game.scale.maxHeight = 576;game.scale.pageAlignHorizontally = false;game.scale.pageAlignVertically = false;game.scale.setScreenSize(true);Level Loader createMap : function (game) { // adding the "level" tilemap loaded it preloader state var map = game.add.tilemap("level"); $.each(map.tilesets, function (index, tileset) { map.addTilesetImage(tileset.name, tileset.name); }); // create tilemap layers var that = this, entitiesScale = 2, levelScale = 2, platformScale = 2; game.scaleFactor = { level : levelScale, platforms : platformScale }; $.each(map.layers, function (index, layer) { var mapLayer = map.createLayer(layer.name), speed = mapLayer.layer.properties.parallaxSpeed || 1; mapLayer.scrollFactorX = 0.5; mapLayer.name = layer.name; mapLayer.scale.setTo(levelScale, levelScale); //mapLayer.height = 1536; // doesn't seem to make a diff that.layers[layer.name] = mapLayer; if (layer.name === "ground") { mapLayer.resizeWorld(); } }); map.currentLayer = 2; map.widthInPixels = 32 * (468 * 2); map.heightInPixels = map.heightInPixels * 2; //game.camera.setBoundsToWorld(); game.camera.bounds.height = 1536; game.world.bounds.height = 1536; console.log("cam", game.camera.bounds.width, game.camera.bounds.height, game.world); return map;},Camera follow in player update function. game.camera.focusOnXY(this.masterSprite.x + offsetX, this.masterSprite.y + offsetY);

Hello everyone, I have a problem about a list scrolling issue and attached an SS. The problem is, I have some elements just like you see at the SS. Menu 1 and menu 2 is static but the content part must be scrollable. The content part is dynamic so it can grow in numbers. With the state of the current project they are scrollable but the content part is sliding through the back of the menu part. I just want a nice scrollable part so the content will be hidden of masked when getting throughout the menus or the header part. Thanks in advance.