• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Videlais

  1. I've done a great deal of testing with Phaser and CocoonJS, but I don't think I've ever tried the blend modes. Chances are good, though, that if you see CocoonJS 'ignoring' something, it might just be the case that it doesn't have support for that. When you are using it, does that functionality throw any errors in the console?
  2. As the Common Phaser + CocoonJS Issues thread mentions in the first post, CocoonJS doesn't have XML support. If you absolutely need it, there are two solutions for this. One, switch the XML over to JSON and load the content another way or, two, use an external JavaScript library I've worked up for this purpose. (The dev branch of the library has more features, but is still experimental.) Whenever possible, though, it's best to just avoid XML if you going to use CocoonJS.
  3. I'm glad you've figured out what you needed, latheesan. Had you not, I was going to suggest you e-mail me about the guide. I sometimes forget to update it every couple of months when the Phaser API changes.
  4. It's helpful to think of the canvas as the screen within Canvas+ mode. It will start at the top, left-hand corner and extend outward. That's what I was trying to explain about the scaling. It isn't using CSS for positioning at all. It's just rendering the canvas as if it was screen itself. It's usually better to use the window.innerWidth and window.innerHeight values to get the computed resolution and then scale everything up or down as needed. That way, you can plan for something like 1024x768 and then, if the computed resolution is smaller, scale down when needed. Sadly, no. Canvas+ doesn't render using CSS at all. That's what makes it faster than WebView (which is using the device's browser API), but it comes at the cost of things like CSS (and XML) support. If you are thinking of using a <div> or something, that won't work. Canvas+ is not a normal browser environment. If you create the Phaser.Game canvas as the full size (using the window values), you can then using the resizing Phaser API or scale by the computed values of the resolution and your images/sprites resolutions.
  5. As outlined in the Common Phaser + CocoonJS Issues thread, CocoonJS does not have XML support. Alternatives for this include either JSON parsing of the content or consider using an external library for XML support in CocoonJS.
  6. The commit shows which files were changed and where. Yes. Hopefully a touch should no longer be required. It was fixed in this commit. (The above and this commit have nothing to do with each other other than CocoonJS support.)
  7. Are you asking if there is a specific issue with Samsung Galaxy S4, Phaser 2.0.4 , and CocoonJS with Canvas+? If so, my response would probably be that I'm doubtful. It would be very odd if there was a problem with only one model of Android device and not another. My recommendation, if you don't see any speed improvements with Canvas+, is to just use WebView+.
  8. Some clarification: if you are using Canvas+ (Accelerated Canvas) mode, you can ignore CSS measurements. They are rarely accurate. Unless you want to use WebView (or WebView+), testing for margins isn't going to help much for this issue. So, I guess I should have asked this before, but are trying to center the canvas or an image on the canvas itself? If you are trying to center the canvas, you can use what plicatibu or j0hnskot suggested. For centering the image, you can use percentages (of total canvas width and height) and then scale an image/sprite accordingly. What you are seeing with the image is it positioning the canvas correctly (because it doesn't use CSS for that) and then attempting to draw the rest of the space after the image. Usually, what's recommended is to use window.innerWidth and window.innerHeight (as pointed out here) and then scale accordingly. game.scale.setExactFit() and game.scale.setShowAll() will help with that scaling, but it's good to know you can do it manually too when needed.
  9. Hi, Ibon. I can weigh in some on the fillText issue. It's specifically here within the Text object of Pixi.js. A few months ago, I wrote a pull request that attempted to add in a function for this that would calculate font height based on counting the pixels within a canvas. It's much slower, of course, but it doesn't rely on CSS support existing and can be more accurate for non-standard fonts. Having text baseline support, unfortunately, doesn't do much for the problem. The current Pixi (and thus Phaser) calculation uses offsetHeight. In my own testing, this was always set to the canvas size instead of the pixel distance between the two DOM elements based on the font height. It might be possible to find a fix that doesn't use CSS too much, but it would need to find a way through using whatever is currently supported in CocoonJS for measuring distances between DOM elements. (Or just, you know, using the slower way instead for now.)
  10. I did some testing with Opera and various Phaser examples. It's not that Phaser doesn't support Opera at all, but more than some of the examples have problems at the moment.
  11. Assuming you are using HTML + JavaScript, it is probably because you are caching the resources after the first loading. Once everything has been downloaded initially, it is being read from the browser's cache and not from its source. Any loading using resources that have not changed will usually be faster on future requests because of this. One way to break up the initial loading is to stagger it across the game. Instead of loading everything at once, only load what you need for the next level or section of the game. Then, as the player gets ready to move to another section, or just during the play of the first section, load the resources for the next. (This works best when the loading is not very computing intensive, of course.) Another way, the most common way, is to just show a loading screen and some type of animation or updating bar to signal that you are loading things at the beginning. Games that use browsers to run them are always going to be affected by their functionality and the caching (or not) of resources is just something to be mindful of for mobile devices like those running iOS.
  12. I'm not exactly sure what you are asking. Are you writing that the image is not being rendered (is not shown), or that it is not centered correctly?
  13. Thank you, Rich, for looking into these things. I'm glad to read at least these three issues should no longer happen. I think I tried Filters before too and didn't get them to work. It reminds me to add them to the top post list. It's good to know there is a root cause, lack of context.createPattern support, that's messing up tile sprites support. I know I have seen lots of people struggling with that for months now. I'll just make a note in the top post to explain that they don't work with CocoonJS and why. I definitely feel the same way. Best case, I think, is just a more refined list of what the issues and problems are, not necessarily solving them.
  14. It does. WebGL has tons of optimizations I would love for Phaser to be able to use with CocoonJS. Unfortunately, as Starnut wrote, people aren't using it. There have been problems for months now with WebGL in Phaser under CocoonJS and the general consensus is to avoid it when possible. My hope with the latest turning-off-WebGL hack is that it gives us some time to fix everything between now and Phaser 2.1 in the next several weeks. This latest little hack solves a number of other, more annoying issues at the moment and I remain at least somewhat hopeful it that it leads to figuring out why we are seeing Canvas and WebGL modes being mixed in Phaser right now when used with CocoonJS. Believe me, I love WebGL. It's way better than pure Canvas for drawing things. However, at least right now anyway, I'd much rather have images working normally again in the short term as we try to patch up WebGL support in the longer term.
  15. You can have Physics support on more than one layer. It just doesn't always make sense to do so. Usually, one layer is used as something like you have now, a floor or wall or other fixed surface. Then, to place objects, developers add them as Phaser.Sprite(s) separately or as part of a Phaser.Group so that they can animate or move by themselves. Other layers would be background images or other visual details that sprites would not collide with. The thing to remember is that Phaser isn't very old and its API has changed a very large number of times in the last year or so. Previous to 2.0, there have been a handful of different ways to add and collide with with tilemaps. Now, finally, the major API changes have slowed done and documentation is being written to explain why and how everything works. Because it's an open-source project, and even Rich himself doesn't get paid to work on it, help and better documentation is sometimes slow to appear and get approved by the general community. There is a major push coming soon, though. There is a book in the works and the number of examples with documentation is still growing.
  16. Hi, remingtonink. Building off s-niambar's example (and the way I do it too), your code might look something like the following: var game = new Phaser.Game(240, 320, Phaser.AUTO, 'game_div');// I'm making an assumption here that 'player' will be used// across multiple states, so I'm leaving its reference// in a higher (function) scopevar player;var main_state = function(game) { // All of the variables that were defined in the // same scope as 'game' are now defined inside the 'main_state' // object itself. this.balls; this.bombs; this.cursors; this.scoreCounter = 0; this.text;};// Instead of properties of 'main_state', I am// adding these to its 'prototype'.// The reason for this is because all properties of// an object's prototype share the same function// execution scope as the object itself.//// In other words, we can reference 'this' variables// that are defined in one places across all// prototype properties.main_state.prototype = { preload: function() { game.load.image('paddle', 'assets/player.png'); game.load.image('bullets', 'assets/player.png'); game.load.image('bomb', 'assets/bomb.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#2d2d2d'; // Since all the variables earlier are 'this' now, // all of their references become this.variableName this.balls =; this.balls.createMultiple(250, 'bullets', 0, false); this.bombs =; this.bombs.createMultiple(1000, 'bomb', 0, false); player = game.add.sprite(,, 'paddle'); player.scale.setTo(8,2); game.physics.arcade.gravity.y = 400; // Enable physics on everything added to the world so far (the true parameter makes it recurse down into children) game.physics.arcade.enable(, true); player.body.allowGravity = 0; player.body.immovable = true; this.cursors = game.input.keyboard.createCursorKeys();, fireBall, this);, fireBomb, this); this.text = game.add.text(16, 16, '', { fill: '#ffffff' }); }, fireBall: function() { var ball = balls.getFirstExists(false); if (ball) { ball.frame = game.rnd.integerInRange(0,6); ball.exists = true; ball.reset(, 0); } }, fireBomb: function() { var bomb = bombs.getFirstExists(false); if (bomb){ bomb.frame = game.rnd.integerInRange(0,6); bomb.exists = true; bomb.reset(, 0); } }, catchBall: function(a, ball) { this.scoreCounter++; this.text.text = this.scoreCounter; this.ball.kill(); }, catchBomb: function(a, ball) { this.scoreCounter = 0; this.text.text = this.scoreCounter; this.ball.kill(); }, update: function(){ game.physics.arcade.collide(player, this.balls, null, this.catchBall, this); game.physics.arcade.collide(player, this.bombs, null, this.catchBomb, this); player.body.velocity.x = 0; if (this.cursors.left.isDown){ player.body.velocity.x = -200; } else if (this.cursors.right.isDown){ player.body.velocity.x = 200; } balls.forEachAlive(checkBounds, this); bombs.forEachAlive(checkBounds, this); }, checkBounds: function(ball) { if (this.ball.y > 330){ this.ball.kill(); } },};// Add and start the 'main' state to start the gamegame.state.add('main', main_state); game.state.start('main');The difference between this and your code is that I'm creating a variable instance instead of passing an object literal as the game state. The assigning of the anonymous function -- var main_state = function(game) { ... }-- creates it as a Function (and thus Object). Then, using your code but adding 'prototype', I am augmenting the object by adding properties to its prototype chain. As I wrote in my comment, this allows for creating 'this'-scoped properties in its initial definition and the ability to reference them in the functions and other properties defined as part of the prototype chain.
  17. I e-mailed my contact at Ludei and got back a reply on this. The sort-of-official message is that turning off WebGL support (or not testing for it) should probably be done in JavaScript space, not necessarily from the cloud compiler options themselves. I specifically asked about what the the "WebGL Enabled" toggle did and he answered that all it does is tell the launcher to return null for the calls to the following: canvas.getContext("webgl") || canvas.getContext("experimental-webgl")My current thinking, then, is that Phaser might need a flag or some type of check for if Phaser.CANVAS has been set, and if so, to not even bother doing the testing for WebGL within the Phaser.Device object. It's either that or we just test for navigator.isCocoonJS, and if it's there, avoid triggering WebGL support at all through testing for it. Although I haven't had time to test things out myself yet, it should be a matter of checking if "this.cocoonJS" is true within the _checkFeatures function and avoid checking for WebGL support.
  18. In Tiled, the leftmost edge of grid-space will be the outer limit, going left. The same with the far right. The grid-space dictates where tiles can be placed. The work-area, your red, is just there in case the map is changed or zoomed in or out in some way. As you might have notice, you can only place tiles within the grid itself. Probably not. Maps need to be composed of Tile Layers. You add them using Map -> New Tileset in Tiled. After selecting your file and setting the dimensions, clicking "OK" from its dialog box will create a new Tile Layer using those tiles. The Starstuck example is good for this. It shows the use of loading and use JSON files exported from Tiled. However, to give you a more detailed breakdown, hopefully the following code will help. In your preload:// Load the JSON file using the TILDED_JSON special flaggame.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);// The first parameter is the key to the cache dictionary. We use that to reference the loaded data.// The second parameter is the location of the file relative (or using absolute paths) to the file loading it.// (For example, with a 'index.html' in a root directory with the folder 'assets' in the same place, I reference the map as 'assets/map.json'// The third, null in this case, is the parameter of the optional data URL for the map.// The fourth is a special flag, Phaser.Tilemap.TILED_JSON, that specifies that this JSON data came from Tiled (and that it should be loaded as such)Before and in your create (assuming Physics.Arcade, 'game' is a Phaser.Game object, and there is an image 'level' in the cache dictionary): var map; // The tilemapvar layer; // A layer within a tilesetfunction create() {// Add the tilemap 'map' to the gamemap = game.add.tilemap('map');// Add the tileset image 'level' to the map// (The name must match both an image in Phaser's cache// and the name of an image within the JSON file// list of tilesets too.)map.addTilesetImage('level');// Create a layer from the JSON file// based on 'Tile Layer 1' from the available tiles.layer = map.createLayer('Tile Layer 1');// Set the collision range // Here, in this example, the range is from 1 to 5.// (Those are the positions of the tile in the image// file itself, starting at 1 from the upper-left corner.)map.setCollisionBetween(1, 5);// Tell the layer to resize the game 'world' to match its sizelayer.resizeWorld();// Enable the Physics.ARCADE body for the;// Adjust the world bounds now that the // world has been resized earlier// (from the layer.resizeWorld() ).game.physics.setBoundsToWorld();...}In your update (assuming a 'player' and that colliding with the map's layer is wanted): game.physics.arcade.collide(player, layer);
  19. That's not quite true. Since Panda.js uses Pixi.js, many of the problems with text rendering, for example, are shared between it and Phaser. The same, I imagine, with many WebGL operations too. Any problem Pixi.js has with CocoonJS, Panda.js will have it too. But, yeah, I agree with you about Phaser being well maintained yet having all these issues with CocoonJS. It's frustrating. My only recommendation, then, is to not move to Phaser unless you have to right now for CocoonJS support. If you aren't having problems with Panda.js and CocoonJS, just use that. We will, hopefully, eventually solve all these issues at some point, but I don't think it will be any time soon.
  20. The first answer to all of this is another question. Have you seen the pinned topic of "Common Phaser + CocoonJs issues"? It's where I try to catalog the various problems and solutions for issues between CocoonJS and Phaser. As for scaling, well, there is code you need to use for that. It's linked from that topic. For it being laggy or not, that's pretty relative and often a result of the device being used to run it. Generally, CocoonJS wrapped Phaser code runs well, even on lower end devices. For bugs... yes. There are a number of issues I would classify as such. You can see them from that topic. But, then again, you might not run into the same issues depending on what your project is and how you are handling certain things.
  21. Well, for the array, one solution might be to have Phaser.Point objects be at those positions and just save/adjust their property values each time. location[1]['player'].x = 0;location[1]['player'].y = 864;location[1]['server'].x = 0;location[1]['server'].y = 864;Something else to consider is a function that calls a lookup-table like this and returns a Phaser.Point. That way, you only need to write your logic once and can return the new object, using it as the property of another object. //Assuming 'position' is just a Phaser.Point property on playerplayer.position = getPlayerPosition(diceTotal);//Assuming 'position' is just a Phaser.Point property on serverPlayerserverPlayer.position = getServerPosition(diceTotal);
  22. I was able to confirm this. It appears with any JPEG encoded image on iOS in CocoonJS 2.0, but only in CANVAS mode. I did not see the border when using WebGL. (I also tested on Android in both CocoonJS 1.4.7 and 2.0 and across all modes. The border did not appear at all on Android.) Phaser: Test is here; ZIP of Canvas test is here; ZIP of WEBGL test is here. Hoping this was an issue with that particular file format and CocoonJS, I also created a low level, load-and-loop-draw example too. However, the border did not appear again on iOS in CocoonJS. Low level: Test; ZIP file. So, after a few hours messing around with this, I'm not sure what's causing the border, but I have confirmed that it does appear with JPEG images when using both Phaser 2.0.4 (with CANVAS mode) and CocoonJS 2.0, but only on iOS.
  23. Yes, WebAudio is a planned feature. (See the Phaser road map.) However, as with all planned features, it is more likely to arrive earlier not because people want it, but when someone writes the code for Phaser themselves. Something to consider in the meantime, though, is to find a MIT-licensed library and write a plugin for Phaser. That's the best way to pave the road to having full WebAudio sooner.
  24. To start to solve this, the first thing you need to know is that Chrome is actually doing things correctly. Both Firefox and IE are very lax in their CORS policies and will often allow cross-domain image loading with the CANVAS. They definitely shouldn't, but they do anyway. (This is also why the local loading works too. Firefox and IE will even load "file://" protocol images sometimes and they definitely shouldn't do that at all.) So, the thing to check, then, is the "crossdomain.xml" file on S3. Is there a 'Access-Control-Allow-Origin' property in the file? If so, does it allow the domain you are trying from? It reads as if you just need to adjust some settings and it should work on the domain you need.
  25. I don't know of any HTML5-based apps in any store that aren't at least tens of megabytes big, if not more. The overhead code required just to interpret JavaScript in real time takes some good amount of space by itself. That written, if you don't like PhoneGap or CocoonJS, have you tried just Cordova itself? Or Intel XDK (which uses Cordova)? Getting away from Phaser (which is this forum's general topic), there's also Appcelerator and Crosswalk too. They have their API for drawing things, but you might have more success with speed and size with them depending on what you are doing.