phaserjs / phaser-ce-examples Goto Github PK

b.inputPixelPerfect is no longer used (I think) should be changed to
---> b.input.pixelPerfectOver = true;

also the debug functions
---> game.debug.spriteCorners(b);
---> game.debug.point(b.input._tempPoint);
are giving errors, but did not look into that...

Anyone attempting to load the main index.html in the examples folder and then run the basic examples will be met with an "unable to load" issue for the "basics" .js files. This can easily be fixed by adding a - to the .js files or removing the - from whatever is referring to those examples that way.

https://github.com/photonstorm/phaser-examples/blob/master/examples/tilemaps/create%20from%20objects.js

When i run this example with phaser below 2.1.X, everything is fine, but when I run this example with phaser 2.2.X on mac chrome, some sprite doesn't display whole, on mac safari when i move arrow a lot of sprites disappear, no exception is throw, so i am confuse, maybe some bugs in 2.2.X?

Sorry, this isn't so much an issue as it is a feature request. If there's a better place for me to submit such a request, please let me know.

I'm trying to work my way through the examples but I never know which one to look at and try to comprehend next. Working through the basics was easy, but where to next? Just picking randomly I often feel overwhelmed.

Setting the version to 2.0.7 or dev seems to work, though.

Hi Rich,
great to see this move of examples happen! But I wonder where am I supposed to checkout the examples. I just cloned the repository, but in a naive way into a folder 'phaser-examples' on the same level as 'phaser' and not into folder phaser itself.

$ ls
Mar 14 07:17 phaser
Mar 14 07:18 phaser-examples

I started a local server with python -m SimpleHTTPServer and of course I cannot run the examples as the runtime build/phaser.js is not found. Is it required to clone into the other repository phaser/examples ? Or is it just the wrong time as you moved the examples into this repository minutes ago?

Anyway here my points:

• Readme talks about a npm install, gruntfile. But this is missing in this repository.
• Readme talks about git clone but not the expected location (./phaser ?)
• It should be clearer that you expect a cloned phaser (core) repository side by side.

If you really want to tell the people to clone into another existing repository:
Maybe you could try submodules after all. It's more a passive integration of a second repository B in A. It's not about creating commits for B, it's only a easy way to keep a second codebase fresh. But: I'm no expert with git, maybe it's indeed a wrong use case. It just feels so right for this.

Here the documentation:
http://git-scm.com/docs/git-submodule

Submodules allow foreign repositories to be embedded within a dedicated subdirectory of the source tree, always pointed at a particular commit.

They are not to be confused with remotes, which are meant mainly for branches of the same project; submodules are meant for different projects you would like to make part of your source tree, while the history of the two projects still stays completely independent and you cannot modify the contents of the submodule from within the main project.

The reset bullet function is not being called on event..

bullets.callAll('events.onOutOfBounds.add', 'events.onOutOfBounds', resetBullet, this);

need to add

bullets.setAll('checkWorldBounds', true);

to the code

Console error:

Mixed Content: The page at 'https://phaser.io/examples/v2/groups/bring-a-group-to-top' was loaded over HTTPS, but requested an insecure resource 'http://examples.phaser.io/embed.php?f=groups/bring+a+group+to+top.js'. This request has been blocked; the content must be served over HTTPS.

what can I try?

Many of the examples load files from the filesystem using an incorrect character case.

For example, examples/filters/fire.js is loaded as examples/filters/Fire.js in the Filters > Fire demo. This causes 404's on a case sensitive filesystem (some Mac's, Linux, 99% of web servers).

To reproduce:

1. go to any example
2. watch it start running
3. press rocket icon

Results:
Black rectangle instead of running example

Console shows Type errors, with references to "undefined"

For instance, the examples try to load _site/js/phaser.js - which does not exist. Just clone the repo and try to look at the examples and you'll note how they don't work.

commit 38f04fac985c365ba0b88e7f984fccdf73d66368
Author: Eugenio [email protected]
Date: Sun Apr 13 14:49:40 2014 -0300

Add a link to jsbin of the first example

So users can interact easily with the examples

diff --git a/examples/_site/examples.json b/examples/_site/examples.json
index aef456c..64dd382 100644
--- a/examples/_site/examples.json
+++ b/examples/_site/examples.json
@@ -196,7 +196,8 @@
   "basics": [
     {
       "file": "01+-+load+an+image.js",
-      "title": "01 - load an image"
+      "title": "01 - load an image",
+      "jsbin":"http://jsbin.com/zagob/1/edit?js,output"
     },
     {
       "file": "02+-+click+on+an+image.js",
diff --git a/examples/_site/js/phaser-examples.js b/examples/_site/js/phaser-examples.js
index 519fadb..4807ca4 100644
--- a/examples/_site/js/phaser-examples.js
+++ b/examples/_site/js/phaser-examples.js
@@ -51,7 +51,13 @@ $(document).ready(function(){

            for (var e = 0; e < files.length; e++)
            {
-               node += '<li><a href="_site/view_full.html?d=' + dir + '&amp;f=' + files[e].file + '&amp;t=' + files[e].title + '">' + files[e].title + '</a></li>';
+               if(typeof files[e].jsbin !== 'undefined')
+               {
+                   node += '<li><a href="_site/view_full.html?d=' + dir + '&amp;f=' + files[e].file + '&amp;t=' + files[e].title + '&amp;jsbin='+files[e].jsbin+'">' + files[e].title + '</a></li>';
+               }else{
+                   node += '<li><a href="_site/view_full.html?d=' + dir + '&amp;f=' + files[e].file + '&amp;t=' + files[e].title + '">' + files[e].title + '</a></li>';
+               }
+               
                t++;
            }

diff --git a/examples/_site/js/phaser-sideview.js b/examples/_site/js/phaser-sideview.js
index 6f40b9b..9194e32 100644
--- a/examples/_site/js/phaser-sideview.js
+++ b/examples/_site/js/phaser-sideview.js
@@ -21,7 +21,12 @@ $(document).ready(function(){

            for (var e = 0; e < files.length; e++)
            {
-               node += '<a href="_site/view_lite.html?d=' + dir + '&amp;f=' + files[e].file + '&amp;t=' + files[e].title + '" target="viewer">' + files[e].title + '</a><br />';
+               node += '<a href="_site/view_lite.html?d=' + dir + '&amp;f=' + files[e].file + '&amp;t=' + files[e].title + '" target="viewer">' + files[e].title + '</a>';
+               if(typeof files[e].jsbin !== 'undefined')
+               {
+                   node += ' - <a href="'+files[e].jsbin+'" target="_blank">Jsbin</a>';
+               }
+               node += '<br />';
            }

            $("#examples-list").append(node);

Hello,

First, thanks for the awesome game engine and plethora of examples!

While going through them, I noticed a few issues with the 'Retro Font' examples.

For 'Retro Font 1', with Chrome on left and Safari on right. Chrome never displays the text, while for Safari it 'flickers' (depending on if you mouse-over or mouse-out):

(Retro Font 1: ok on Safari)

(Retro Font 1: bad on both)

For 'Retro Font 2', it doesn't work on Chrome..

Info:
OSX: 10.9.2
Chrome: 34.0.1847.131
Safari: 7.0.3 (9537.75.14)

The ship stops shooting after a while if the Space button is held down. The behaviour is the same on Firefox 28 on Ubuntu and Chromium 33 on Ubuntu 12.04

Not sure if you're aware, but anything you add to the URL in the examples is evaluated as is.

Example: http://examples.phaser.io/_site/view_full.html?d=sprites&f=dynamic+crop.js&t=test%3Cscript%3Ealert%28123%29%3C/script%3E (just a JS alert, nothing dangerous)

http://examples.phaser.io/tilemaps/swap%20tiles.js

http://phaser.io/examples/v2/tilemaps/create-from-objects

This example is not loading... When you open the console you see:

Uncaught TypeError: this.collideSpriteVsTilemapLayer is not a function

Failed to load resource: the server responded with a status of 404 (OK) https://cdn.rawgit.com/photonstorm/phaser/undefined/build/phaser.js?_=1416584934590
Failed to load Phaser.js from github, falling back to local copy phaser-viewer.js:49
Phaser v2.1.0 | Pixi.js v1.6.1 | WebGL | WebAudio http://phaser.io ♥♥♥ VM55:22711

The example games aren't successfully being pulled from Github, not sure if this is actually an issue, but it might be worth looking into.

The example code loads an audiosprite with JSON, but when it's added to the game, it's added as regular audio ('game.add.audio'), and then the markers are defined manually in code.

IMO, the correct demonstration of audiosprites with JSON would be to use 'game.add.audioSprite' and let the markers generate themselves from the JSON.

Hi ! I'm just starting with phasejs, and I noticed that you don't have any example showing how to use Stages. Ir I leaset I cannot find some, in that case, please add the word 'Stage' in the description of the example so the word can be found iunt ehexamples index. Keep the good work!

I tested the sample from examples.phase.io and it is not working.

No error message neither on Firefox console nor on Chrome console.

Also the attribute volume in the source code the lines

music.volume += 0.1;

and

music.volume -= 0.1;

should be replaced by
_volume

Please make all examples work well on mobile.

Hi all.

All seven basics examples are with link broken

The problem is in _./examples/site/examples.json
All seven file names area define with a '-' between number and title, like

"file": "01+-+load+an+image.js"

but the correct is: "file":"01+load+an+image.js"

I change examples.json, but other option is rename the basics js files...

I expect this help and sorry if it's duplicate, I look but not found anyone told about that...

See ya

Samuel

Currently, none of the filter examples seem to work (for example! har har). The repo version starts with a capital letter, that's what the code expects, but the file on the server is all lower case.

Any uniform vector set as array always outputs four zeros:
this.uniforms.color = {type: '4f', value: [100, 200, 300, 400]}; // still renders as black!

But changing it to an object makes it work:
this.uniforms.color = {type: '4f', value: {x: 0.7, y: 0.5, z: 0.2, w: 1.0}}; // renders correct color.

Same with '2f' and '3f' vectors.

http://phaser.io/examples/v2/input/keyboard-justpressed

I'm working on some updates 🙊 - and was wondering if there was a particular reason to use $.getScript to load the Phaser library (instead of via a non-eval SCRIPT element)? Besides it "just working, generally", of course..

I ask this because Firefox does not like to debug such and cannot correctly navigate stack-traces into, which makes local "debugging" with the examples a PITA. (Chrome and IE are fine.)

Ref (old, outdated, but useful links off and alternatives): http://stackoverflow.com/questions/690781/debugging-scripts-added-via-jquery-getscript-function

After you lose the game, you are still able to fire and collect points from the last ship position.

I believe it needs to be updated to use the new downDuration/justDown.

Can anyone help me understand this code?

What is the meaning of this empty function with one parameter?

MissileCommand.Boot = function (game) { };

In the file 02 - click on an image.js I noticed that the function listener() sets the text of the text variable text directly, as in text.text = ... , this does not seem to work at least for me and the tests I've ran and I was wondering if it wouldn't be better to use text.setText() as this seems to work.

Probably switched with some other example because it doesn't feature the justpressed function.

http://examples.phaser.io/_site/view_full.html?d=demoscene&f=unlimited%20bobs.js&t=unlimited%20bobs&phaser_version=v2.0.0&

I receive an error in chrome:

"Uncaught TypeError: undefined is not a function"

In the line 59 of examples/demoscene/unlimited bobs.js:

bmdDest.fastCopy(bmd, r, game.world.centerX, game.world.centerY);

And the line 50 of examples/bitmapdata/fastcopy draw.js:

bmdDest.fastCopy(bmd, r, game.world.centerX, game.world.centerY, data.r, 0.5, 0.5, data.s, data.s, 0.7);

Debugging the project, I see that the object bmdDest (A BitmapData object) doesn't have a fastCopy method.

I was working on a small map that i scale to make the player feels that its a big (and pixelated) world while its just a small and simple tilemap.

While doing this i've noticed that the camera its not working quite well. I have prepared a demo using one of the examples from http://examples.phaser.io

Demo using mario
http://jsbin.com/xicav/3/

Source;
http://jsbin.com/xicav/3/edit?js,output

This is broken because Sprite#group returns undefined. This could be fixed by adding the property to the Sprite class, but since I'm new to Phaser don't know why was it changed.
/**

• @name Phaser.Sprite#group
• @Property {string} group - If Sprite is in a group return the group name
  */
  Object.defineProperty(Phaser.Sprite.prototype, "group", {
  get: function () {
  if (parent && parent.type == Phaser.GROUP)
  {
  return this.parent.name;
  }
  else
  {
  return null;
  }
  }
  });

You also need to add the names to the groups after creating them:
left.name = "left";
right.name = "right";

or at game.add.group() time

http://examples.phaser.io/_site/view_full.html?d=games&f=gemmatch.js&t=gemmatch

See video: http://cl.ly/2k3F3d1G0i3h which shows broken gameplay logic and gems going to the wrong place (two gems in the same place).

Also reported (kind of) here: http://www.html5gamedevs.com/topic/5895-candy-crush-on-phaser/

None of the filter examples work. They all report the same type of error:

GET http://examples.phaser.io/filters/Plasma.js 404 (Not Found)

I think the problem is that the files are not capitalized. "plasma.js" exists, "Plasma.js" does not. And so on for all the filter examples.

I think it's because the textures are img, not PIXI.texture...

Both the player's bullets and the enemies are not being killed when out of bounds.

Your example in "fullscreen buttons" says click or tap to continue. It works on a computer browser but when i try mobile(default/firefox/safari from an android) it doesn't go fullscreen. Is this a glitch or is the technology just not there to do fullscreen on mobile? (My goal is to have a user-clicked locked orientation from html5, which seems to require a fullscreen first).

Had to add
--> game.physics.enable( [ b ], Phaser.Physics.ARCADE );
for it to work, don´t know if its the best way to do it, but it solved

also change pixelPerfect to pixelPerfectOver as prior issues

Hi! I'm working on some Phaser's examples and I've found the Simon game examples a bit buggy. Sometimes, after the game intro (with the flashing squares), the game is stuck with transparent squares (and they becomes visible again only if you move the mouse over them). This make the game unplayable, because is not possible to see which is the first square :D

Anyway, from the debug console I've seen this "warning":

phaser.min.js:15 Phaser.Tween.to cannot be called after Tween.start

I think this can be connected to the issue.

I have this issue both in Chrome than in Firefox!

Originaly post as an issue on the phaser repository :
phaserjs/phaser#1072

http://examples.phaser.io/_site/view_full.html?d=p2%20physics&f=platformer+material.js&t=platformer%20material

It seems that each time the player object collides, it gets accelerated more, making this >demo unuseable.

I thinks the issue is on the line 63 the stiffness is too high, setting it to 1e3 solve the problem.

Seems a bug around Gem Match, when matching 3, and does'nt complete until a second click on another object, and then swaps with gem at the top of the stack.
Then you have to click the matched set to make it clear.
Ill have a look if I can figure it out, and recommend back a fix.

I searched all over the documentation and found only one reference to the .anchor property - and it didn't really explain what it was or how to use it. I found an explanation for it here on the Wiki but this kind of information should be in the docs.

Scale does appear as a property of Group so it just needs to appear on other places as well.

assets/pics/trsipic1_lazur.jpg which is used by all sprite crop examples is missing

http://phaser.io/examples/v2/display/ellipse#gv

Phaser 2.2.2 won't display, it seem some examples may be still running on old libraries when clicking the "Run Code" button even when the list is Phaser 2.3.0.

Hi guys, I'm testing the starstruck example with cocoonjs and I want it to look good on all devices, I'm trying to use game.world.scale to achieve it, the render is ok, but the collision detection seems to be wrong, It is as if the world scale does not affect the physic positions. Here is my code:

var width = navigator.isCocoonJS ? window.innerWidth : 800;
    var height = navigator.isCocoonJS ? window.innerHeight : 600;  

    var game = new Phaser.Game(width, height, Phaser.CANVAS, '', {
        preload: preload,
        create: create,
        update: update,
        render: render
    });

    var map;
    var tileset;
    var layer;
    var player;
    var facing = 'left';
    var jumpTimer = 0;
    var cursors;
    var jumpButton;
    var bg;

    function preload() {
        game.load.tilemap('level1', 'assets/level1.json', null, Phaser.Tilemap.TILED_JSON);
        game.load.image('tiles-1', 'assets/tiles-1.png');
        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
        game.load.spritesheet('droid', 'assets/droid.png', 32, 32);
        game.load.image('starSmall', 'assets/star.png');
        game.load.image('starBig', 'assets/star2.png');
        game.load.image('background', 'assets/background2.png');
    }

    function getRatio(type, w, h) {
        var scaleX = width / w,
            scaleY = height / h,
            result = {
                x: 1,
                y: 1
            };

        switch (type) {
        case 'all':
            result.x = scaleX > scaleY ? scaleY : scaleX;
            result.y = scaleX > scaleY ? scaleY : scaleX;
            break;
        case 'fit':
            result.x = scaleX > scaleY ? scaleX : scaleY;
            result.y = scaleX > scaleY ? scaleX : scaleY;
            break;
        case 'fill':
            result.x = scaleX;
            result.y = scaleY;
            break;
        }

        return result;
    }

    function create() {
        var ratio = getRatio('fill', 800, 600);

       if (navigator.isCocoonJS) {
            game.world.scale.x = ratio.x;
            game.world.scale.y = ratio.y;
            game.world.updateTransform();
        } else {
            game.stage.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            game.stage.scale.minWidth = 800;
            game.stage.scale.minHeight = 600;
            game.stage.scale.pageAlignHorizontally = true;
        }

        game.physics.startSystem(Phaser.Physics.ARCADE);

        game.stage.backgroundColor = '#000000';

        bg = game.add.tileSprite(0, 0, 800, 600, 'background');
        bg.fixedToCamera = true;

        map = game.add.tilemap('level1');

        map.addTilesetImage('tiles-1');

        map.setCollisionByExclusion([ 13, 14, 15, 16, 46, 47, 48, 49, 50, 51 ]);

        layer = map.createLayer('Tile Layer 1');

        //  Un-comment this on to see the collision tiles
        layer.debug = true;

        layer.resizeWorld();

        game.physics.arcade.gravity.y = 250;

        player = game.add.sprite(32, 32, 'dude');
        game.physics.enable(player, Phaser.Physics.ARCADE);

        player.body.bounce.y = 0.2;
        player.body.collideWorldBounds = true;
        player.body.setSize(20, 32, 5, 16);
        player.debug = true;

        player.animations.add('left', [0, 1, 2, 3], 10, true);
        player.animations.add('turn', [4], 20, true);
        player.animations.add('right', [5, 6, 7, 8], 10, true);

        game.camera.follow(player);

        cursors = game.input.keyboard.createCursorKeys();
        jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    }

Screenshot here
I would appreciate any help, thanks in advance.

The game gets this exception:
Uncaught TypeError: Object [object Object] has no method 'tileset'

It is using old syntax from 1.1.3.
Could you update this example to 2.0.1
Thanks