khleug35

Members
  • Content Count

    141
  • Joined

  • Last visited

  • Days Won

    3

Posts posted by khleug35


  1. Hello, I would like to add small update to the System Text in text.js in order to make it have New Lines like <br> and typewriter-effect like RPG dialogue.

    Demo.

    new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit. Sed posuere interdum sem.\nQuisque ligula eros ullamcorper quis,\nlacinia quis facilisis sed sapien.\nMauris varius diam vitae arcu.\nSed arcu lectus auctor vitae,\nconsectetuer et venenatis eget velit.');

    if the text includes "\n", it become line breaks like <br>

    and user enable typing_effect = true;

    the text have  typewriter-effect like RPG dialogue.

    ezgif-4-3e034cdad1a5.gif.025e0ae93ac1df4e31a5a824f0069356.gif

     

    First, 

    render\text.js

    Add typing_effect varable.

    game.createClass('SystemText', 'Container', {
    ...
    
    /**
        Enable typewriter-effect
        @default false
    **/
    
        typing_effect: false,
        i: 1,
    
    ...

     

    Add the following code, when user type "\n", it can do line break effect

    var lines = this.text.split('\n');  //Check New Lines
    for (var i = 0; i<lines.length; i++){
    context.fillText(lines, 0,  (i*this.size) );

     

    _renderCanvas: function(context) {
            var wt = this._worldTransform;
            var ths = this;
            context.globalAlpha = this._worldAlpha;
            context.setTransform(wt.a, wt.b, wt.c, wt.d, wt.tx * game.scale, (wt.ty + this.size) * game.scale);
            context.fillStyle = this.color;
            context.font = this.size * game.scale + 'px ' + this.font;
            context.textAlign = this.align;
            
            if(this.text == undefined){
            context.fillText(this.text, 0, 0);
            }else{    
            if(this.typing_effect){   //Enable Typewriter-effect
            var lines = String(this.text.substr(0, this.i)).split('\n');
            if(this.i <= this.text.length){    
            this.i++;
             }
            }else{
            var lines = this.text.split('\n');  //Check the text include '/n'
            } 
            for (var i = 0; i<lines.length; i++){
            context.fillText(lines[i], 0,  (i*this.size) );
             }      
            }
        } 

     

    Main.js

    Enable typing_effect

    this.text.typing_effect = true;

    game.module(
        'game.main'
    )
    .body(function() {
    
    game.createScene('Main', {
        init: function() { 
            var ths = this;
            this.text = new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit. Sed posuere interdum sem.\nQuisque ligula eros ullamcorper quis,\nlacinia quis facilisis sed sapien.\nMauris varius diam vitae arcu.\nSed arcu lectus auctor vitae,\nconsectetuer et venenatis eget velit.');
            this.text.size = 50;
            this.text.font = 'serif';
            this.text.color = '#ffffff';
            
            this.text.typing_effect = true; //Enable typewriter-effect
    
            this.text.x = 10;
            this.text.addTo(this.stage);
    //      this.text.text = 'Hello\nPanda';  
        },
        update:function(){
    
        }
    });
    
    
    });
    

     

    Could you update this  @enpu?

    my code may be not good or more hardcode or not the best solution to achieve , Welcome to give me a feedback to improve my coding skill,

    Thanks

     

    text.js


  2. @AlienBurn

    recommend you try both and see which one suits you.
    For me
    Panda 
    -Easy to learn, I have three games made with panda.
    -Very small community.
    -Panda Editor is not free but it can make you code your game faster(export to web or mobile is easy). 
    -Growth So Slow, Engine has not updated for a long time, I worried that it like impact.js.
       

    Phaser
    -Much tutorial and Demo Example (but it left me quite confused after looking at multiple tutorials and even trying a few test projects.) 

    -Very large community.
    -if you want to export to mobile and Code obfuscation, You need to learn cordova/phonegap , Webpack etc….it's totally free
    -Engine keep updated each month, fast-growing. 

    Finally, Both of them are an awesome HTML5 engine.😁 


  3. Fling, Tap and hold to swing on yellow Circle and collect the hearts attain request the target amount.
    Flip tiger laughing like a spiderman.

    Play Here

    https://superfranco.itch.io/ropes-game


    Android Version:

    https://play.google.com/store/apps/details?id=io.game.ropesgame
    Play Store Link
     

    How to Play:
    -Tap and hold to swing on yellow Circle.
    -Collect the hearts until attaining request the target amount within a limited time.
    -Avid the Bomb
    -Complete all 12 Levels

    giphy.gif

     

    Credit:
    Graphic Download By:  
    CraftPix.net  https://craftPix.net
    OpenGameArt   https://opengameart.org/

    Music By bart:

    https://opengameart.org/content/jump-and-run-tropical-mix

    Inspiration:

    https://triqui.itch.io/gems-n-ropes

    Engine:
    Panda2 
    P2.js


  4. Is it bug????

    I always use this method to make some sprite or shape fix into camera view.

    if I want to make some sprite to fix into camera view and don't want to put it in 'stage'

    I will create fixed_camera_container to make the sprite to fix into camera view.

    this.fixed_camera_container = new game.Container();
    this.fixed_camera_container .addTo(this.stage);
            
    this.container = new game.Container();
    this.container.addTo(this.stage);
    
    this.healthbar = new game.healthbarClass();  //Fixed to camera
    this.healthbar.sprite.addTo(this.fixed_camera_container);
    
    this.player = new game.playerClass(); 
    this.player.sprite.addTo(this.container); 
    
    this.camera = new game.Camera(this.player.sprite);
    this.camera.addTo(this.container);

     

           

          


  5. @Wolfsbane

    Thank you for playing and comment, I fixed the brown wall jumping problem, It may be more smoothly now.

    I agree with your suggestion. Panda editor can trial the plugin.

    @enpu

    Yes, This demo is export to web and uploads to itch io.

    Hope Panda2 have best future:lol: waiting for the Multiplayer plugin,thanks


  6. A Simple Game example of the 8-direction movement template created using the Panda engine. controlled with WSAD keys. The User can shoot bullets by Mouse clicking.

    Demo Game

    Full Game Download:

    https://github.com/SuperFranco16/TopDownShooter_Panda2_Template

    ZInLVL1.png

    Features:

    -Press WASD to move

    -Press P Pause the Game

    -Mouse to aim and shoot bullets

    Notes:

    -This template is not created by enpu, so my code maybe not good or more hardcode or not the best solution to achieve , Welcome to give me a feedback to improve my coding skill, Thanks

    -Game asset download from https://opengameart.org/users/rileygombart , https://opengameart.org/content/top-down-sci-fi-shooter-pack

    Full Code: main.js

    game.module(
    	'game.main'
    )
    .body(function() {
    	game.addAsset('bg.jpg');
    	game.addAsset('player.png');
    	game.addAsset('player_bullet.png');
    	game.addAsset('Enemy.png');
    	game.addAsset('explosion.png');
    	game.createScene('Main', {
    		init: function() {
    			var ths = this;
    			this.world = new game.Physics(0, 0);
    			this.container = new game.Container();
    			this.container.addTo(this.stage);
    			//BackGround
    			this.bg = new game.Sprite('bg.jpg').addTo(this.container);
    			//Player
    			this.player = new game.Player(200, 300);
    			//Enemy
    			game.Timer.add(1500, function() {
    				new game.Enemy(Math.floor(game.scene.player.body.position.x + 
                                              (Math.random(Math.random(-1000, -600),Math.random(600, 1000)))), game.scene.player.body.position.y + 
                                              (Math.random(-800, 800)));
                }, true);
                
    			// Left wall
    			new game.Wall(0, 810, 30, 1650);
    			// Right wall
    			new game.Wall(2060, 810, 30, 1650);
    			// Top wall
    			new game.Wall(1030, 0, 2060, 30);
    			// Bottom wall
    			new game.Wall(1030, 1640, 2060, 30);
    			
                //BackScreen
    			this.blackscreen = new game.Graphics();
    			this.blackscreen.fillColor = '#000000';
    			this.blackscreen.alpha = 0;
    			this.blackscreen.drawRect(0, 0, game.width, game.height);
    			
                //Score, When you kill the enemy, you get 10 score.
    			this.score = 0;
    			this.scoretxt = new game.SystemText('Score : ' + this.score);
    			this.scoretxt.size = 36;
    			this.scoretxt.color = '#fdfdfd';
    			this.scoretxt.position.set(16, 0);
    			this.scoretxt.addTo(this.stage);
    			
                //How To Play
                new game.Dialogue(16, 50, '-Press WASD to move');
    			new game.Dialogue(16, 80, '-Press P Pause the Game');
    			new game.Dialogue(16, 110, '-Mouse to aim and shoot');      
          
          
                //Camera Follow Player
    			this.camera = new game.Camera(this.player.sprite);
    			this.camera.position.set(this.player.sprite);
    			this.camera.limit.x = 0;
    			this.camera.limit.y = 0;
    			this.camera.limit.width = game.width - 500;
    			this.camera.limit.height = game.height + 200;
                this.camera.acceleration = 20;
    			this.camera.addTo(this.container);
    		},
    		keydown: function(key) {
    			if (key === 'P') {
    				if (this.paused) {
    					this.resume();
    					this.blackscreen.remove();
    				} else {
    					this.pause();
    					this.blackscreen.addTo(this.stage);
    					this.blackscreen.alpha = 0.5;
    				}
    			}
    		},
    		update: function() {}
    	});
    	game.createClass('Player', {
    		selectTime: true,
    		speed: 400,
    		init: function(x, y) {
    			var ths = this;
    			this.sprite = new game.Sprite('player.png');
    			this.sprite.anchorCenter();
    			this.sprite.position.set(x, y);
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body();
    			this.body.collisionGroup = game.Body.PLAYER;
    			this.body.collideAgainst = [game.Body.WALL, game.Body.ENEMY];
    			this.body.position.set(x, y);
    			var shape = new game.Rectangle(this.sprite.width / 2.5, this.sprite.height / 2.5);
    			this.body.addShape(shape);
    			this.body.addTo(game.scene.world);
    			this.body.collide = this.collide.bind(this);
    			this.worldPosition = new game.Vector();
    		},
    		play: function(anim) {
    			if (this.sprite.currentAnim === this.sprite.anims[anim]) return;
    			this.sprite.play(anim);
    		},
    		collide: function(body) {
    			if (body.collisionGroup === game.Body.ENEMY) {
    				return false;
    			}
    			return true;
    		},
    		shoot: function() {
    			var bullet = new game.playerbullet('player_bullet.png', 0, 0, this.sprite.position.x, this.sprite.position.y);
    			bullet.addTo(game.scene.container);
    			var angle = game.input.mouse.angle(this.worldPosition);
    			bullet.rotation = angle - Math.PI / 2;
    			bullet.body.velocity.x = 2000 * Math.cos(angle - Math.PI);
    			bullet.body.velocity.y = 2000 * Math.sin(angle - Math.PI);
    			this.sprite.swap(bullet);
    		},
    		reset: function(speed) {
    			var ths = this;
    			this.selectTime = false;
    			if (!this.selectTime) {
    				game.Timer.add(speed, function() {
    					ths.selectTime = true;
    				});
    			}
    		},
    		update: function() {
    			if (game.scene.isMouseDown && this.selectTime) {
    				this.shoot();
    				this.reset(300);
    			}
    			this.worldPosition.copy(this.sprite.position);
    			this.worldPosition.subtract(game.scene.camera.position);
    			var angle = game.input.mouse.angle(this.worldPosition);
    			this.sprite.rotation = angle - Math.PI / 2;
    			if (game.keyboard.down('A')) {
    				this.body.velocity.x = -this.speed;
    			} else if (game.keyboard.down('D')) {
    				this.body.velocity.x = this.speed;
    			} else {
    				this.body.velocity.x = 0;
    			}
    			// Set y velocity based on up and down keys
    			if (game.keyboard.down('W')) this.body.velocity.y = -this.speed;
    			else if (game.keyboard.down('S')) this.body.velocity.y = this.speed;
    			else this.body.velocity.y = 0;
    			/*
    			  this.sprite.rotation= this.sprite.position.angle(game.scene.circle2.position);
    			*/
    			this.sprite.position.x = this.body.position.x;
    			this.sprite.position.y = this.body.position.y;
    		}
    	});
    	game.createClass('Enemy', {
    		immortal: false,
    		alive: true,
    		health: 3,
    		speed: 400,
    		selectTime: true,
    		init: function(x, y) {
    			var ths = this;
    			// Play animation
    			this.sprite = new game.Sprite('Enemy.png');
    			this.sprite.anchorCenter();
    			this.sprite.position.set(x, y);
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body();
    			this.body.collisionGroup = game.Body.ENEMY;
    			this.body.collideAgainst = [game.Body.PLAYER, game.Body.PLAYERBULLET];
    			this.body.position.set(x, y);
    			var shape = new game.Rectangle(this.sprite.width / 2, this.sprite.height / 2);
    			this.body.addShape(shape);
    			this.body.addTo(game.scene.world);
    			this.body.collide = this.collide.bind(this);
    			this.removeTimer = game.Timer.add(8000, this.remove.bind(this));
    		},
    		play: function(anim) {
    			if (this.sprite.currentAnim === this.sprite.anims[anim]) return;
    			this.sprite.play(anim);
    		},
    		collide: function(body) {
    			if (body.collisionGroup === game.Body.PLAYERBULLET) {
    				this.hurt();
    				return false;
    			}
    			return true;
    		},
    		hurt: function() {
    			var ths = this;
    			if (this.immortal == false) {
    				this.immortal = true;
    				this.health--;
    				var ths = this;
    				this.sprite.tint = '#ffffff';
    				game.Timer.add(100, function() {
    					ths.sprite.tint = '';
    					ths.immortal = false;
    				});
    			}
    		},
    		remove: function() {
    			this.body.remove();
    			this.sprite.remove();
    			game.scene.removeObject(this);
    		},
    		dead: function() {
    			var ths = this;
    			if (this.health <= 0) {
    				if (this.alive) {
    					this.alive = false;
    					game.scene.score = game.scene.score + 10;
    					game.scene.scoretxt.text = 'Score : ' + game.scene.score;
    					var explosion = new game.Explosion(this.body.position.x, this.body.position.y);
    					explosion.sprite.addTo(game.scene.container);
    					this.remove();
    				}
    			}
    		},
    		reset: function(speed) {
    			var ths = this;
    			this.selectTime = false;
    			if (!this.selectTime) {
    				game.Timer.add(speed, function() {
    					ths.selectTime = true;
    				});
    			}
    		},
    		update: function() {
    			this.dead();
    			this.sprite.rotation = this.body.position.angle(game.scene.player.body.position) + .1;
    			var e = this.sprite.position.angle(game.scene.player.sprite.position);
    			this.body.velocity.x = Math.cos(e) * 300, this.body.velocity.y = Math.sin(e) * 300;
    			this.sprite.position.x = this.body.position.x;
    			this.sprite.position.y = this.body.position.y;
    		}
    	});
    	game.createClass('playerbullet', 'PhysicsSprite', {
    		// How fast playerbullet moves (pixels in second)
    		init: function(texture, width, height, x, y) {
    			this.anchorCenter();
    			this.body.position.set(x, y);
    			this.body.collisionGroup = game.Body.PLAYERBULLET;
    			this.body.collideAgainst = [game.Body.ENEMY];
    		},
    		collide: function(body) {
    			this.remove();
    		},
    		remove: function() {
    			// Extend remove function to also remove object from scene
    			// So it's update function doesn't get called anymore
    			this.super();
    			game.scene.removeObject(this);
    		},
    		update: function() {
    			// Remove playerbullet if out of screen
    			if (!this.onScreen()) this.remove();
    		}
    	});
    	game.createClass('Explosion', {
    		init: function(x, y) {
                var ths = this;
    			this.sheet = new game.SpriteSheet('explosion.png', 256, 256);
    			this.sprite = new game.Animation(this.sheet.textures);
    			this.sprite.addAnim('doexplode', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], {
    				speed: 30,
    				loop: false
    			});
                
                //Explosion animation completed, the boom will be destroyed 
                this.sprite.anims.doexplode.onComplete = function() {
    		    ths.sprite.remove();
                ths.body.remove();
    			game.scene.stage.removeChild(ths);
                };
                
    			this.sprite.anchorCenter();
    			this.sprite.position.set(x, y);
    			this.sprite.play('doexplode');
    			this.body = new game.Body();
    			this.body.mass = 0;
    			this.body.position.set(x, y);
    			var shape = new game.Rectangle(this.sheet.width, this.sheet.height);
    			this.body.addShape(shape);
    			this.body.addTo(game.scene.world);
    		},
    		play: function(anim) {
    			if (this.sprite.currentAnim === this.sprite.anims[anim]) return;
    			this.sprite.play(anim);
    		}
    	});
    	game.createClass('Wall', {
    		init: function(x, y, width, height) {
    			this.body = new game.Body();
    			var shape = new game.Rectangle();
    			shape.width = width;
    			shape.height = height;
    			this.body.position.x = x;
    			this.body.position.y = y;
    			this.body.addShape(shape);
    			this.body.static = true;
    			this.body.addTo(game.scene.world);
    		}
    	});
    	game.createClass('Dialogue', {
    		init: function(x, y, txt) {
    			this.text = new game.SystemText(txt);
    			this.text.size = 25;
    			this.text.color = '#fdfdfd';
    			this.text.position.set(x, y);
    			this.text.addTo(game.scene.stage);
    		}
    	});
    	// Attributes for different body types
    	game.addAttributes('Body', {
    		WALL: 0,
    		PLAYER: 1,
    		PLAYERBULLET: 2,
    		ENEMY: 3,
    		ENEMYBULLET: 4
    	});
    });
    

    TopDownShooter.zip


  7. A Simple Game example of platformer template created using the Panda2 engine + P2 plugin. 

    This Template is remade base on Construct 3 platformer template.

    Demo Game

    Download:(not include p2.js plugin)

    https://github.com/SuperFranco16/p2-platformer-template

    Features:

    -Arrow keys or WASD to move
    -P key to pause the game      
    -You can jump up across the brown walls

    nviFMh5.png

    I3WrROz.png

     

    Update(2019-9-18):

    Added Rope-Swinging Features:

    -Jump up and Press E to climb up the rope, when you see red circle.

    giphy.gif

    Notes:

    -This template is not created by enpu, so my code maybe not good or more hardcode or not the best solution to achieve , Welcome to give me a feedback to improve my coding skill, Thanks
    -P2 Plugin is not open source, so the download file is not include p2.js.

    Full Code: Main.js

    game.module(
        'game.main'
    )
    .require(
        'plugin.p2'
    )
    .body(function() {  
    	game.addAsset('player.png');
    	game.addAsset('BackgroundTile.png');
    	game.createScene('Main', {
    		backgroundColor: '#272727',
    		init: function() {
    			var ths = this;
    			this.world = new game.Physics({
    				gravity: [0, 12],
    			});
    			this.world.on('beginContact', function(data) {
                // Before collision
                });
                this.world.on('impact', function(data) {
                // Collision
                });
                this.world.on('postStep', function(data) {
                // After collision
                });
    			//Group
    			this.groups = {
    				PlayerGroup: Math.pow(2, 0),
    				PlayerGroupFilter: Math.pow(2, 1),
    				GROUND: Math.pow(2, 2),
    			};
    			this.container = new game.Container();
    			this.container.addTo(this.stage);
    			
                //Map     
    			this.bg = new game.TilingSprite('BackgroundTile.png', game.width, game.height).addTo(this.container);
    			new game.Wall_Platform(32, 96, 32, 672);
    			new game.Wall_Platform(160, 384, 32, 224);
    			new game.Wall_Platform(1247, 0, 64, 1023);
    			new game.Slope_Solid_Platform(675, 310, 200, 32, 8.9);
    			new game.Slope_Solid_Platform(619, 463, 365, 32, 9.6);
    			new game.Slope_Solid_Platform(322, 392, 219, 32, 9.8);
    			new game.Solid_Platform(32, 768, 352, 128);
    			new game.Solid_Platform(864, 800, 96, 32);
    			new game.Solid_Platform(992, 928, 128, 32);
    			new game.Solid_Platform(1088, 736, 96, 32);
    			new game.Solid_Platform(992, 928, 128, 32);
    			new game.Solid_Platform(1088, 736, 96, 32);
    			new game.Solid_Platform(480, 240, 96, 30);
    			new game.Solid_Platform(528, 432, 96, 32);
    			new game.Solid_Platform(192, 320, 96, 32);
    			new game.Solid_Platform(0, -28, 1280, 28);
    			new game.Solid_Platform(32, 768, 352, 128);
    			new game.JumpThru_Platform(1056, 624, 160, 16);
    			new game.JumpThru_Platform(1056, 528, 160, 16);
    			new game.JumpThru_Platform(160, 224, 96, 16);
    			new game.JumpThru_Platform(320, 160, 96, 16);
    			new game.JumpThru_Platform(528, 128, 96, 16);
    			new game.JumpThru_Platform(1056, 128, 96, 16);
    			new game.MovingSolid_Platformer_Horizon(450, 800, 128, 32, 730, 2000);
    			new game.MovingSolid_Platformer_Horizon(640, 160, 128, 32, 800, 2000);
    			new game.MovingSolid_Platformer_Vertical(928, 417, 96, 16, 190, 2000);
    			
                //How To Play
    			new game.Dialogue(42, 790, '-Arrow keys or WASD to move');
    			new game.Dialogue(42, 824, '-P key to pause the game');
    			new game.Dialogue(42, 858, '-You can jump up across the brown walls');
    			
                //Player
    			this.player = new game.Player(128, 684);
    			
                //Hide BackScreen
    			this.blackscreen = new game.Graphics();
    			this.blackscreen.fillColor = '#000000';
    			this.blackscreen.alpha = 0;
    			this.blackscreen.drawRect(0, 0, game.width, game.height);
    			
                //Camera Follow Player
    			this.camera = new game.Camera(this.player.sprite);
    			this.camera.position.set(this.player.sprite.position.x,this.player.sprite.position.y);
    			this.camera.limit.x = 0;
    			this.camera.limit.y = 0;
    			this.camera.limit.width = game.width;
    			this.camera.limit.height = game.height;
    			this.camera.acceleration = 20;
    			this.camera.addTo(this.container);
    			this.container.scale.x = 2;
    			this.container.scale.y = 2;
    		},
    		keydown: function(key) {
    			if (key === 'P' && this.player.sprite.onScreen()) {
    				if (this.paused) {
    					this.resume();
    					this.blackscreen.remove();
    				} else {
    					this.pause();
    					this.blackscreen.addTo(this.stage);
    					this.blackscreen.alpha = 0.5;
    				}
    			}
    		},
    		update: function() {
    			this.bg.x = this.camera.position.x * 0.4;
    		}
    	});
    	game.createClass('Player', {
    		classname: 'playerclass',
    		speed: 3,
    		alive: true,
                     wall: false,
    		isOnGround: false,
    		init: function(x, y) {
    			var ths = this;
    			this.sprite = new game.Sprite("player.png");
    			this.sprite.position.set(x, y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 1,
    				fixedRotation: true,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			this.shape = new p2.Box({
    				width: this.sprite.width / game.scene.world.ratio,
    				height: this.sprite.height / game.scene.world.ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.PlayerGroup;
    			this.shape.collisionMask = game.scene.groups.PlayerGroup | game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.PlayerBody;
    			this.body.addTo(game.scene.world);
    		},
    		checkIfCanJump: function() {
    			for (var i = 0; i < game.scene.world.narrowphase.contactEquations.length; i++) {
    				var c = game.scene.world.narrowphase.contactEquations[i];
    				if (c.bodyA === this.body || c.bodyB === this.body) {
    					this.isOnGround = true;
    					var d = c.normalA[1];
    					if (c.bodyB === this.body) d *= -1;
    					if (d > 0.5) {
    						return true;
    					}
    				}
    			}
    			this.isOnGround = false;
    			return false;
    		},
    		Onslope: function() {
    			var ths = this;
    			for (var i = 0; i < game.scene.world.narrowphase.contactEquations.length; i++) {
    				var c = game.scene.world.narrowphase.contactEquations[i];
    				if (game.scene.player.body.velocity[1] < 0 && ((c.bodyA === this.body && c.bodyB.collisionGroup === game.Body.SlopePlatformBody) || (c.bodyB === this.body && c.bodyA.collisionGroup === game.Body.SlopePlatformBody))) {
    					this.body.mass = 0;
    					this.body.velocity[1] = 0;
    					var d = c.normalA[1];
    					if (c.bodyB === this.body) d *= -1;
    					if (d > 0.5) {
    						return true;
    					}
    				}
    			}
    			this.body.mass = 1;
    			return false;
    		},
    		OnWall: function() {
    			var ths = this;
                 if(this.wall){    
                 game.Timer.add(150, function() {
                  ths.wall= false;
                 });    
                if (this.sprite.scale.x == -1) {
                            //this.body.velocity[0] = 16; 
                            this.body.position[0] = this.body.position[0] + 0.06;    
                            }else{
                            //this.body.velocity[0] = -16;  
                            this.body.position[0] = this.body.position[0] - 0.06;    
                            }
                            this.body.velocity[1] = -6;
         
                }
                
    			for (var i = 0; i < game.scene.world.narrowphase.contactEquations.length; i++) {
    				var c = game.scene.world.narrowphase.contactEquations[i];
    				if ((c.bodyA === this.body && c.bodyB.collisionGroup === game.Body.WallBody) || (c.bodyB === this.body && c.bodyA.collisionGroup === game.Body.WallBody)) {
                        if(!this.isOnGround){ 
    					  if (game.scene.player.body.velocity[1] > 2 && game.keyboard.down('W')) {
                             this.wall = true;  
    					    return true;
                           }
                         }
    				  }
    			}
     
    			return false;
    		},
    		play: function(anim) {
    			if (this.sprite.currentAnim === this.sprite.anims[anim]) return;
    			this.sprite.play(anim);
    		},
    		destroy: function() {
    			game.scene.blackscreen.addTo(game.scene.stage);
    			this.sprite.remove();
    			this.body.remove();
    			game.scene.removeObject(this)
    			var tween1 = new game.Tween(game.scene.blackscreen);
    			tween1.to({
    				alpha: 1
    			}, 1000);
    			tween1.easing('Quadratic.InOut');
    			tween1.start();
    			tween1.onComplete(function() {
    				game.system.loadScene('Main');
    			});
    		},
    		update: function() {
    			var ths = this;
                      console.log(this.wall); 
                
    			if (!this.sprite.onScreen()) {
    				this.destroy();
    			}
    			if (this.checkIfCanJump() || game.scene.player.body.velocity[1] > 2) {
    				if (game.keyboard.down('S')) {
    					ths.shape.collisionGroup = game.scene.groups.PlayerGroupFilter;
    				} else {
    					ths.shape.collisionGroup = game.scene.groups.PlayerGroup;
    				}
    			} else if (game.scene.player.body.velocity[1] < 2) {
    				ths.shape.collisionGroup = game.scene.groups.PlayerGroupFilter;
    			}
    			this.OnWall();
    			this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;
    			this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    			this.Onslope();
                
                if(!this.wall){   
    			if (game.keyboard.down('A')) {
    				this.body.velocity[0] = -this.speed;
    				this.sprite.scale.x = -1;
    			} else if (game.keyboard.down('D')) {
    				this.body.velocity[0] = this.speed;
    				this.sprite.scale.x = 1;
    			} else {
    			    this.body.velocity[0] = 0;
    			}
                }    
    			//Jump
    			if (this.checkIfCanJump()) {
    				if (game.keyboard.down('W')) {
    					this.isonSlope = false;
    					this.body.velocity[1] = -6;
    				}
    			  }
            },
    	});
    	game.createClass('Wall_Platform', {
    		init: function(x, y, width, height) {
    			this.sprite = new game.Graphics();
    			this.sprite.fillColor = '#895103';
    			this.sprite.drawRect(0, 0, width, height);
    			this.sprite.position.set(this.sprite.width / 2 + x, this.sprite.height / 2 + y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 0,
    				fixedRotation: false,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			var ratio = game.scene.world.ratio;
    			this.shape = new p2.Box({
    				width: this.sprite.width / ratio,
    				height: this.sprite.height / ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.GROUND;
    			this.shape.collisionMask = game.scene.groups.PlayerGroup | game.scene.groups.PlayerGroupFilter | game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.WallBody;
    			this.body.addTo(game.scene.world);
    		},
    		update: function() {
    			this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;
    			this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    		}
    	});
    	game.createClass('Solid_Platform', {
    		init: function(x, y, width, height) {
    			this.sprite = new game.Graphics();
    			this.sprite.fillColor = '#2a2a2a';
    			this.sprite.drawRect(0, 0, width, height);
    			this.sprite.position.set(this.sprite.width / 2 + x, this.sprite.height / 2 + y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 0,
    				fixedRotation: false,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			var ratio = game.scene.world.ratio;
    			this.shape = new p2.Box({
    				width: this.sprite.width / ratio,
    				height: this.sprite.height / ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.GROUND;
    			this.shape.collisionMask = game.scene.groups.PlayerGroup | game.scene.groups.PlayerGroupFilter | game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.PlatformBody;
    			this.body.addTo(game.scene.world);
    		},
    		update: function() {
    			this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;
    			this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    		}
    	});
    	game.createClass('JumpThru_Platform', {
    		init: function(x, y, width, height) {
    			this.sprite = new game.Graphics();
    			this.sprite.fillColor = 'blue';
    			this.sprite.drawRect(0, 0, width, height);
    			this.sprite.position.set(this.sprite.width / 2 + x, this.sprite.height / 2 + y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 0,
    				fixedRotation: false,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			var ratio = game.scene.world.ratio;
    			this.shape = new p2.Box({
    				width: this.sprite.width / ratio,
    				height: this.sprite.height / ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.PlatformBody;
    			this.body.addTo(game.scene.world);
    		},
    		update: function() {
    			this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;
    			this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    		}
    	});
    	game.createClass('Slope_Solid_Platform', {
    		init: function(x, y, width, height, angle) {
    			this.sprite = new game.Graphics();
    			this.sprite.fillColor = '#860000';
    			this.sprite.drawRect(0, 0, width, height);
    			this.sprite.position.set(this.sprite.width / 2 + x, this.sprite.height / 2 + y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 0,
    				angle: angle,
    				fixedRotation: false,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			var ratio = game.scene.world.ratio;
    			this.shape = new p2.Box({
    				width: this.sprite.width / ratio,
    				height: this.sprite.height / ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.GROUND;
    			this.shape.collisionMask = game.scene.groups.PlayerGroup | game.scene.groups.PlayerGroupFilter | game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.SlopePlatformBody;
    			this.body.addTo(game.scene.world);
    		},
    		update: function() {
    			this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;
    			this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    		}
    	});
    	game.createClass('MovingSolid_Platformer_Horizon', {
    		init: function(x, y, width, height, hx, speed) {
    			this.speed = speed;
    			this.sprite = new game.Graphics();
    			this.sprite.fillColor = '#2a2a2a';
    			this.sprite.drawRect(0, 0, width, height);
    			this.sprite.position.set(this.sprite.width / 2 + x, this.sprite.height / 2 + y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 0,
    				fixedRotation: false,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			var ratio = game.scene.world.ratio;
    			this.shape = new p2.Box({
    				width: this.sprite.width / ratio,
    				height: this.sprite.height / ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.GROUND;
    			this.shape.collisionMask = game.scene.groups.PlayerGroup | game.scene.groups.PlayerGroupFilter | game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.Float_PLATFORM_HORIZON;
    			this.body.collideAgainst = [game.Body.PLAYER];
    			this.body.addTo(game.scene.world);
    			game.Tween.add(this.sprite.position, {
    				x: hx
    			}, speed, {
    				repeat: Infinity,
    				yoyo: true
    			}).start();
    		},
    		collidePlayer: function() {
    			for (var i = 0; i < game.scene.world.narrowphase.contactEquations.length; i++) {
    				var c = game.scene.world.narrowphase.contactEquations[i];
    				if ((c.bodyA === this.body && c.bodyB.collisionGroup === game.Body.PlayerBody) || (c.bodyB === this.body && c.bodyA.collisionGroup === game.Body.PlayerBody)) {
    					return true;
    				}
    			}
    			return false;
    		},
    		update: function() {
    			if (this.collidePlayer()) {
    				game.scene.player.body.position[0] -= (this.body.position[0] - (this.sprite.position.x / game.scene.world.ratio));
    			}
    			this.body.position[0] = this.sprite.position.x / game.scene.world.ratio;
    			this.body.position[1] = this.sprite.position.y / game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    		}
    	});
    	game.createClass('MovingSolid_Platformer_Vertical', {
    		init: function(x, y, width, height, vy, speed) {
    			this.speed = speed;
    			this.sprite = new game.Graphics();
    			this.sprite.fillColor = '#2a2a2a';
    			this.sprite.drawRect(0, 0, width, height);
    			this.sprite.position.set(this.sprite.width / 2 + x, this.sprite.height / 2 + y);
    			this.sprite.anchorCenter();
    			this.sprite.addTo(game.scene.container);
    			this.body = new game.Body({
    				mass: 0,
    				fixedRotation: false,
    				position: [
    					this.sprite.position.x / game.scene.world.ratio,
    					this.sprite.position.y / game.scene.world.ratio
    				],
    			});
    			var ratio = game.scene.world.ratio;
    			this.shape = new p2.Box({
    				width: this.sprite.width / ratio,
    				height: this.sprite.height / ratio
    			});
    			this.shape.collisionGroup = game.scene.groups.GROUND;
    			this.shape.collisionMask = game.scene.groups.PlayerGroup | game.scene.groups.PlayerGroupFilter | game.scene.groups.GROUND;
    			this.body.addShape(this.shape);
    			this.body.collisionGroup = game.Body.Float_PLATFORM_VERTICAL;
    			this.body.collideAgainst = [game.Body.PLAYER];
    			this.body.addTo(game.scene.world);
    			game.Tween.add(this.sprite.position, {
    				y: vy
    			}, speed, {
    				repeat: Infinity,
    				yoyo: true
    			}).start();
    		},
    		collidePlayer: function() {
    			for (var i = 0; i < game.scene.world.narrowphase.contactEquations.length; i++) {
    				var c = game.scene.world.narrowphase.contactEquations[i];
    				if ((c.bodyA === this.body && c.bodyB.collisionGroup === game.Body.PlayerBody) || (c.bodyB === this.body && c.bodyA.collisionGroup === game.Body.PlayerBody)) {
    					return true;
    				}
    			}
    			return false;
    		},
    		update: function() {
    			if (this.collidePlayer()) {
    				game.scene.player.body.position[1] -= (this.body.position[1] - (this.sprite.position.y / game.scene.world.ratio));
    			}
    			this.body.position[0] = this.sprite.position.x / game.scene.world.ratio;
    			this.body.position[1] = this.sprite.position.y / game.scene.world.ratio;
    			this.sprite.rotation = this.body.angle;
    		}
    	});
    	game.createClass('Dialogue', {
    		init: function(x, y, txt) {
    			this.text = new game.SystemText(txt);
    			this.text.size = 18;
    			this.text.color = '#fdfdfd';
    			this.text.position.set(x, y);
    			this.text.addTo(game.scene.container);
    		}
    	});
    	// Attributes for different body types
    	game.addAttributes('Body', {
    		PlayerBody: 0,
    		PlayerAttackBody: 1,
    		PlatformBody: 2,
    		SlopePlatformBody: 3,
    		WallBody: 4
    	});
    });

     


  8. Hello

    I using Panda2 + P2.js to develop my next project, When I add Camera function to Panda Editor Debug mode.

    the sprite bound is not displaying correctly ?? 

    https://imgur.com/a/lUYxKd2

    I3b2wmV.png

     

    My full code:

        backgroundColor: '#272727',
        
        init: function() {
            this.world = new game.Physics();
            
            this.world.on('beginContact', function(data) {
               
            });
            this.world.on('impact', function(data) {
               
            });
            this.world.on('postStep', function(data) {
            
            });
            this.container = new game.Container();
            this.container.addTo(this.stage);
            
            var ratio = this.world.ratio;
            var wallShape, wallBody;
            // Left wall
            wallShape = new p2.Box({ width: 2, height: game.height / ratio });
            wallBody = new game.Body({
                position: [-1, game.height / 2 / ratio]
            });
           
                 .......... //same width Panda2 P2.js "Main" Example
    
            this.mouseBody = new game.Body();
            this.mouseBody.addTo(this.world);
            this.player2 = new game.Player(game.width / 2, game.height / 2);
            
             //Add Camera Function
            this.camera = new game.Camera(this.player2.sprite);
            this.camera.setPosition(this.player2.sprite);
            this.camera.addTo(this.container);
           
        },
        
      
        
        addConstraint: function(x, y, player) {
            this.mousemove(x, y);
            
            .......... //same width Panda2 P2.js Player class Example
        },
        
        mousemove: function(x, y) {
            this.mouseBody.position[0] = x / this.world.ratio;
            this.mouseBody.position[1] = y / this.world.ratio;
        },
        
        mouseup: function() {
            .......... //same width Panda2 P2.js Player class Example
        }
    });
    
    game.createClass('Player', {
        init: function(x, y) {
            .......... //same width Panda2 P2.js Player class Example
        }
    });

     


  9. @Wolfsbane

    Thank you for reply,

    The following is my simple project

    I try to  use chrome console debug to find the answer

    but still no idea, thx :)

    game.module(
        'game.main'
    )
    .body(function() {
    game.addAsset('player.png');
    
    game.createScene('Main', {
        init: function() {
            this.sheet = new game.SpriteSheet('player.png', 149 ,237);
            this.anim = new game.Animation(this.sheet.textures);
            this.anim.addAnim('run', [3, 4, 5, 6, 7, 8, 9]);
            this.anim.play('run');
            this.anim.addTo(this.stage);
            
          console.log(this.anim);
        }
    });
    });

    I can't upload the 'player.png' to this forum. so plz kindly download the 'player.png' to this link , thx

     https://www.panda2.io/content/examples/media/player.png

     


  10. Hello, The following example can help you:

    https://phaser.io/examples/v3/view/physics/arcade/overlap-zone

    My solution

    var player = this.physics.add.sprite(100, 450, 'player');
    var tree = this.physics.add.sprite(400, 450, 'tree');
    var DisplayText;
    var Text = this.add.text(16, 16, DisplayText, { fontSize: '32px', fill: '#000' });
    
    this.physics.add.collider(player, tree);

     

    function update ()
    {
        DisplayText = tree.body.touching.none ? 'Collided' : 'not Collided';
        Text.setText(DisplayText);
    }

     


  11. Hello EveryOne :lol:

     How to get the TextureFrame number on Animation?? Thanks you very much

      this.sheet = new game.SpriteSheet('panda.png', 150 ,111);
      this.sprite = new game.Animation(this.sheet.textures);
      this.sprite.addAnim('attack', [43,44,45,46,47,48], { speed: 12, loop: false });
    
    
    if(this.sprite.xxxxxxxxx.textureframe == 46){  // 
      // dosomething.......
    }

     

    My solution is that, but I don't know Is it the best way to solve the problem?? Thanks

      if(this.sprite.currentAnim == this.sprite.anims['attack']){
          for(var i =0; i < this.sprite.anims.attack.textures.length;i++){
           if(i ===4){  // [43,44,45,46,47,48]  = [0,1,2,3,4,5,6] due to I want to get frame 46, so i type 4. 
                  //doSomething
                }
            }
          }

     

    It is very easy to get the TextureFrame in Phaser 3, How about Panda2, Thank you

    //Phaser 3
    if (this.sprite.anims.currentFrame.textureFrame === 46){
      // dosomething
    }