• Content count

  • Joined

  • Last visited

  • Days Won


samid737 last won the day on April 18

samid737 had the most liked content!

1 Follower

About samid737

  • Rank
    Advanced Member
  • Birthday February 12

Contact Methods

  • Website URL

Profile Information

  • Gender
  • Location
    The Netherlands

Recent Profile Visitors

596 profile views
  1. It looks like (not sure) you are adding velocity with the keyboard, but you are direcly manipulating position (bypassing physics) when using your mouse. Try setting velocity when using your mouse. You should be able to use the standard moveToPointer() function, which works for arcade physics and p2. But you pass the movement speed as a parameter using distanceBetween() the player and mousepointer. An example:
  2. @Kacper Pietrzak The performance was not very well in my version after adding the filter and extra graphics layer, but you probably have it optimized looking at Flashlight.js. The effect looks nice though (dynamic lighting too)... Nice job in any case!
  3. I checked out the game, nice work! why not just add an extra glow graphics layer?: this.shadowLayer =, 0, 'layer-background'); this.shadowLayer.width = * 1.5; this.shadowLayer.height = * 1.5; this.shadowLayer.alpha = _FlashlightConstants.WORLD_SHADOW_ALPHA; this.flickerLayer =, 0, 'layer-background'); this.flickerLayer.width = _FlashlightConstants.RAY_LENGTH * 4.5; this.flickerLayer.height = _FlashlightConstants.RAY_LENGTH * 4.5; this.flickerLayer.anchor.setTo(0.5); this.hideMaskGraphics =, 0); this.shadowLayer.mask = this.hideMaskGraphics; this.showMaskGraphics =, 0); zombies.setAll('mask', this.showMaskGraphics); this.zombies = zombies; this.showMaskGraphics.filters=[this.glowFilter]; //add the extra glow layer, the padding is necessary for a soft light effect this.glowGraphics =, 0); this.glowGraphics.boundsPadding=200; this.glowFilter=new Phaser.Filter.Glow(this); this.glowGraphics.filters=[this.glowFilter]; this.hideMaskGraphics.clear(); this.hideMaskGraphics.moveTo(this.shadowLayer.x, this.shadowLayer.y); this.hideMaskGraphics.lineStyle(2, 0xfff000, 1); this.hideMaskGraphics.beginFill(0x00000000); this.hideMaskGraphics.lineTo(this.player.x, this.player.y); //the extra glow layer this.glowGraphics.clear(); this.glowGraphics.lineStyle(1, 0xfff0f0,0.0 ); this.glowGraphics.beginFill(0xffffff,Math.random()*0.05+0.02); //light flickering effect this.glowGraphics.lineTo(this.player.x, this.player.y); var mouseX =; var mouseY =; var mouseAngle = Math.atan2(this.player.y - mouseY, this.player.x - mouseX); for (var i = 0; i < _FlashlightConstants.NUMBER_OF_RAYS; i++) { var rayAngle = mouseAngle - _FlashlightConstants.LIGHT_ANGLE / 2 + _FlashlightConstants.LIGHT_ANGLE / _FlashlightConstants.NUMBER_OF_RAYS * i; var lastX = this.player.x; var lastY = this.player.y; for (var j = 1; j <= _FlashlightConstants.RAY_LENGTH; j++) { var landingX = Math.round(this.player.x - 2 * j * Math.cos(rayAngle)); var landingY = Math.round(this.player.y - 2 * j * Math.sin(rayAngle)); if (!this.isTileBlocking(landingX, landingY)) { lastX = landingX; lastY = landingY; } else { break; } } this.hideMaskGraphics.lineTo(lastX, lastY); //draw the glow layer this.glowGraphics.lineTo(lastX,lastY); } this.hideMaskGraphics.lineTo(this.player.x, this.player.y); this.hideMaskGraphics.lineTo(this.shadowLayer.x, this.shadowLayer.y); this.hideMaskGraphics.lineTo(this.shadowLayer.x + this.shadowLayer.width, 0); this.hideMaskGraphics.lineTo(this.shadowLayer.x + this.shadowLayer.width, this.shadowLayer.y + this.shadowLayer.height); this.hideMaskGraphics.lineTo(0, this.shadowLayer.y + this.shadowLayer.height); this.hideMaskGraphics.lineTo(this.shadowLayer.x, this.shadowLayer.y); this.hideMaskGraphics.endFill(); It should be possible , it looks quite nice imho, but it does affect performance significantly..... I've added the game.js file. The glow effect also has some flickering effect so the flickeringLayer graphics might not be needed. The filter can be adjusted to add more glow to it (fiddling with the numbers).It also has an extra alpha attributethat could be set, so that the flickering is done within the fragment shader (possible performance benefit, not sure)... the filter: Phaser.Filter.Glow = function (game) { 'use strict';, game); this.uniforms.alpha = { type: '1f', value: 1.0 }; this.fragmentSrc = [ 'precision lowp float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', 'uniform sampler2D uSampler;', 'uniform float alpha;', 'void main() {', 'vec4 sum = vec4(0);', 'vec2 texcoord = vTextureCoord;', 'for(int xx = -16; xx <= 12; xx++) {', 'for(int yy = -8; yy <= 8; yy++) {', 'float dist = sqrt(float(xx*xx) + float(yy*yy));', 'float factor = 0.0;', 'if (dist == 0.0) {', 'factor = 8.0;', '} else {', 'factor = 8.0/abs(float(dist));', '}', 'sum += texture2D(uSampler, texcoord + vec2(xx, yy) * 0.004) * factor;', '}', '}', 'gl_FragColor = sum * 0.025 + texture2D(uSampler, texcoord)*alpha;', '}' ]; }; Phaser.Filter.Glow.prototype = Object.create(Phaser.Filter.prototype); Phaser.Filter.Glow.prototype.constructor = Phaser.Filter.Glow; Object.defineProperty(Phaser.Filter.Glow.prototype, 'alpha', { get: function() { return this.uniforms.alpha.value; }, set: function(value) { this.uniforms.alpha.value = value; } }); Another possibility might be to add A bitmapData copy of the lightmask on the go and apply some filter to it.. But using filters is the only idea I can think of to do this.. game.js
  4. The blur filter should apply to a solid color too I believe (the border sprite around the first example is actually a solid copy of the dude). Another idea, maybe you can use a glow filter?:
  5. Maybe you can apply a bluf filter to your sprites. Im not sure if this will work (WEBGL only) in your specific case, but it might be useful . Here it is applied to an example (you can uncomment the code in create):
  6. Looks really really nice , good luck !! I was wondering how your team is organised (especially how many artists , but also programmers, audio composers and/or other roles...)?
  7. Hi. Here is an example of something you could use using arcade physics: The idea is to first draw any primitive shape you like using bitmapData and interpolation. The shapeData array can be modified to create any shape you like. Then in your plot function you evenly distribute dots (with physics) along your shape. Then you create three to four "mouseBodies" that follow your mouse and collide with the dots. this way you can determine how far off you are from the actual shape. The collision checks are then done and based upon which "mouseBody" is colliding, so you add or even subtract score (see example). Notice that the trail is drawn using rendertextures (example), but this is certainly not a must. You can also draw your mouse trail using graphics. You could also stick to rendertextures, but make your own sprite (simple gradient circle made in photoshop, 64x64) and replace it with the gameboy. You will probably have a nice looking cloud trail. A final note, the actual primitive shape can also be drawn as a polygon using graphics. These are all implementation details, but maybe it will give you more ideas for your own game...
  8. collision

    The main problem is that you are overriding your this.platforms object by saying: this.platforms =; // first im a group object this.platforms = game.add.sprite(0, 553, 'plataforma'); //but now im a sprite object this.platforms = game.add.sprite(-400,300, 'plataforma');//then im the again a sprite object but somewhere off screen game.physics.arcade.enable(this.platforms); //you are enabling only one sprite for arcade physics this.platforms.body.immovable = true; The second problem is, that you are never adding any platforms to your groups using group.add or group.addMultiple. To fix this, you do the following: this.platforms = game.add.physicsGroup(); //this was correct in your code this.platform1 = game.add.sprite(0, 553, 'plataforma');// platform left this.platform2 = game.add.sprite(400,400, 'plataforma');//platform right this.platform3 = game.add.sprite(200,400, 'plataforma');//platform in the middle this.platforms.addMultiple([this.platform1,this.platform2,this.platform3]); //add all platform to the platforms group this.platforms.setAll('body.immovable',true); //make them all immovable this.platforms.setAll('scale.x',4); //scale their x (I dont have your sprite so you might not need to do this) the group.setAll() method allows you to set some properties for all objects in your group, so it makes everything more convenient. Working code: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render ,start :start}); var player; var enemy; var spaceBar; function preload() { game.load.baseURL = '//'; game.load.crossOrigin = 'anonymous'; //game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_color_40x60.png', 40, 60); game.load.image('dude', 'assets/sprites/phaser-dude.png'); } function create() { this.cursor = game.input.keyboard.createCursorKeys(); this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);, 0, 1920, 0); //Fisicas game.physics.startSystem(Phaser.Physics.ARCADE); = 1000; //fondo game.stage.backgroundColor = "#00FFFF"; //codigo de plataformas this.platforms = game.add.physicsGroup(); this.platform1 = game.add.sprite(0, 553, 'plataforma'); this.platform2 = game.add.sprite(400,300, 'plataforma'); this.platform3 = game.add.sprite(200,400, 'plataforma'); this.platforms.addMultiple([this.platform1,this.platform2,this.platform3]); this.platforms.setAll('body.immovable',true); this.platforms.setAll('scale.x',4); //tipo this.player = game.add.sprite(125, 100, 'dude'); this.player.anchor.setTo(0.5, 1);'tipito'); game.physics.arcade.enable(this.player); this.player.body.gravity.y = 800; //player.body.collideWorldBounds = true; (PRODUCE BUG CON //animaciones this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true); //'correr', 10, true); //game.physics.arcade.collide(player, platforms); } function update() { //walkVelocityR = player.body.velocity.x = 200 //walkVelocityL = player.body.velocity.x = -200 //jumpVelocity = player.body.velocity.y = -400 game.physics.arcade.collide(this.player, this.platforms); //platforms.body.checkCollision.down = false;; if (!this.player.inWorld) { playerDie(); } if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.x = 200; this.player.body.velocity.x = -200; this.player.body.velocity.y = -700; } else if (this.cursor.right.isDown && this.cursor.left.isUp) { //cursor.left.enabled = false; this.player.body.velocity.x = 200;'correr', 5, true); this.player.scale.x = 1; a = 2; //console.log("este es a = " + a); } else if (this.cursor.left.isDown && this.cursor.right.isUp) { //cursor.right.enabled = false; this.player.body.velocity.x = -200;'correr', 5, true); this.player.scale.x = -1; } else if (this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.y = -700; } else { this.player.body.velocity.x = 0; this.player.animations.stop(); this.player.frame = 4; } /*/if(cursor.right.justUp){ cursor.left.reset(); } if(cursor.left.justUp){ cursor.right.reset(); }/*/ //var style = { font: "65px Arial", fill: "#ff0044", align: "center" }; //text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"}) //text.anchor.set(0.5); } function render() { //game.debug.inputInfo(32,32); game.debug.key(this.cursor.right, 50,50) this.platforms.forEach(function(platform){game.debug.body(platform)}); } function playerDie(){ this.player.kill(); start() //, start, this) } function start(){ game.state.start('play'); } Also im not sure that your start() function will work (missing 'play' state in your code?), but you will have to check that yourself.
  9. You could probably solve it using this example if you are using checkWorldBounds. Resetting a sprite can normally be done via kill() and reset(). If you are resetting your character this way, then applying the same functions/code to a group object will not work. A group and a sprite are different type of objects with different properties and methods available. You can however iterate through each member and reset them using the forEach function:
  10. Hi, The problem is that your this.players is a group object, but A group object does not have a .body property and so you are trying to set the .bounce of something that does not exist. This is why you are getting an error. The procedure would be to first add your sprites to the group ,THEN set all the necessary physics properties: this.players =; //you need physics group var red_player = this.players.create(10000, - 490, 'red_player'); var blue_player = this.players.create(0, - 490, 'blue_player'); //you can use setAll to set the same properties for every object in players this.players.setAll('body.bounce.y',0.2); this.players.setAll('body.gravity.y',1000); //etc..... //this will not work for the same reason (players does not have .blue_player property), but you already have a reference to the blue player so you can use that reference //this.players.blue_player.animations.add('idle', [0, 1, 2], 2, true); //'idle'); blue_player.animations.add('idle',[0,1,2],2,true); this.players.callAll('', 'animations', 'idle); You need to carefully consider which properties exist for certain objects and which ones do not (the manual is useful for this). Also, it makes more sense to use setAll if you have many objects in your group, but in your case you have only two objects (A red and blue player) and you even have a reference to them, so imho it makes more sense to just edit the properties of the red_player and blue_player: this.players =; var red_player = this.players.create(10000, - 490, 'red_player'); var blue_player = this.players.create(0, - 490, 'blue_player'); red_player.body.bounce.y=0.2; red_player.body.gravity.y=1000; red_player.body.collideWorldBounds=true; blue_player.body.bounce.y=0.2; blue_player.body.gravity.y=1000; blue_player.body.collideWorldBounds=true; blue_player.animations.add(//etc...); //etc..
  11. lol definitely made me laugh! maybe bit more visually appealing UI and social media sharing option (fb) and you could get alot of views/plays!
  12. The overlap callback function will run while there is an overlap. This example demonstrates it better: I think the problem in your code is that your if statement will always be true (the syntax is valid, but the comparison is not) and so it will override the gravity. If I understand you correctly, you want the potion to influence the gravity of your ball , but if the ball did not take(overlap) the potion, then you want some other kind of gravity applied. In that case you can do something like this: update: function() {, this.potionYB, this.takePotionYB, null, this); this.hellium(); }, takePotionYB: function() { this.ball.gravity.y=-50; this.potionYB.kill(); }, hellium: function() { if(this.ball.body.gravity.y!=-50){ //check if we already have -50 gravity or not if(this.ball.x>100&&this.ball.x<200){ this.ball.body.gravity.y=-1; }else{ this.ball.body.gravity.y=1; } } }, here is the above code in an example for your reference: You could also do some boolean check instead of checking the gravity value in the hellium function.: var tookPotion; update: function() {, this.potionYB, this.takePotionYB, null, this); this.hellium(); }, takePotionYB: function() { this.ball.gravity.y=-50; this.potionYB.kill(); tookPotion=true; }, hellium: function() { if(!tookPotion){ //check if we already have -50 gravity or not if(this.ball.x>100&&this.ball.x<200){ this.ball.body.gravity.y=-1; }else{ this.ball.body.gravity.y=1; } } }, hope this helps..
  13. I agree with @samme . It seems like your filter returns an empty array. When you try access the element at index 0, you are accessing an undefined object (otherwise it should not be throwing an error): //error var foo=undefined; console.log(foo.direction); //no error var foo=[]; console.log(foo.direction); //no error var foo ='bar'; console.log(foo.direction);
  14. Nice project, love the street fighter series! One thing I would like to add, although I am not sure this will apply to you: In arcade physics, your physics bodies remain axis aligned, so if you intend to rotate your physics bodies , PROCEED WITH CAUTION. Topic to demonstrate: