phaserjs / phaser-ce-examples Goto Github PK
View Code? Open in Web Editor NEWContains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.
Home Page: http://phaser.io/examples
Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.
Home Page: http://phaser.io/examples
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.
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 + '&f=' + files[e].file + '&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 + '&f=' + files[e].file + '&t=' + files[e].title + '&jsbin='+files[e].jsbin+'">' + files[e].title + '</a></li>';
+ }else{
+ node += '<li><a href="_site/view_full.html?d=' + dir + '&f=' + files[e].file + '&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 + '&f=' + files[e].file + '&t=' + files[e].title + '" target="viewer">' + files[e].title + '</a><br />';
+ node += '<a href="_site/view_lite.html?d=' + dir + '&f=' + files[e].file + '&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);
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.
To reproduce:
Results:
Black rectangle instead of running example
Console shows Type errors, with references to "undefined"
Setting the version to 2.0.7 or dev seems to work, though.
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.
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
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/
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.
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.
/**
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
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.
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)
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
Probably switched with some other example because it doesn't feature the justpressed function.
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
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.
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
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
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?
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!
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.
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?
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).
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
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.
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/
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.
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.
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!
assets/pics/trsipic1_lazur.jpg which is used by all sprite crop examples is missing
Please make all examples work well on mobile.
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.
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...
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
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).
I think it's because the textures are img, not PIXI.texture...
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):
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)
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.
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.
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.
Can anyone help me understand this code?
What is the meaning of this empty function with one parameter?
MissileCommand.Boot = function (game) { };
Originaly post as an issue on the phaser repository :
phaserjs/phaser#1072
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.
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
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:
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.
Both the player's bullets and the enemies are not being killed when out of bounds.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.