momonz Posted May 31, 2014 Share Posted May 31, 2014 Hi Guys, I am very much new to Phaser, CocoonJS and this forum. I am trying to render my sample app to CocoonJS launcher using canvas+. I am using Phaser v2.0.5 and latest CocoonJS Launcher v2+. What I want to do is to center an image (1024 x 768) on a Nexus 7 tablet. As this is a requirement on a project I am working with. Using webview+ and webview, the image is rendered perfectly fine. But having problems with canvas+. I did try to research on this forum but I can not find the answer. Below is my code.<!doctype html><html lang="en"><head> <title>Center Image</title> <script type="text/javascript" src="phaser.js"></script> <style> body { margin: 0; } canvas { display : block; margin : auto; } </style></head><body> <script> var game = new Phaser.Game(1024, 768, Phaser.CANVAS, 'phaserLayer', { preload: preload, create: create }); function preload() { game.load.image('testImage', 'test.jpg'); } function create() { //game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVeritcally = true; game.scale.refresh(); game.add.sprite(0, 0, 'testImage'); } </script> <div id="phaserLayer"> </div></body></html>Regards, Link to comment Share on other sites More sharing options...
plicatibu Posted June 1, 2014 Share Posted June 1, 2014 Maybe this can help you. Link to comment Share on other sites More sharing options...
Videlais Posted June 1, 2014 Share Posted June 1, 2014 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? Link to comment Share on other sites More sharing options...
momonz Posted June 1, 2014 Author Share Posted June 1, 2014 Maybe this can help you. I'll check your link and see what it can do. 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? This is what's happening when run on Canvas+ (see attachment). Using webview, the image is centered and rendered only once, which is what I need when running on Canvas+ Link to comment Share on other sites More sharing options...
momonz Posted June 1, 2014 Author Share Posted June 1, 2014 Maybe this can help you. This doesn't help me. I already know how to set the dimensions of my game. the problem is the canvas itself is being positioned to the left most. When I ran a debug the margins are: this.margin.x: 112pxthis.game.canvas.style.marginLeft: 112 which should at least center the image. But because the image is rendered multiple times as shown on the screen above, the topmost image is rendered at 0,0. So why does the image rendered several times when running canvas+ Link to comment Share on other sites More sharing options...
momonz Posted June 3, 2014 Author Share Posted June 3, 2014 Any help? Link to comment Share on other sites More sharing options...
j0hnskot Posted June 3, 2014 Share Posted June 3, 2014 try playing with game.scale.setExactFit() and game.scale.setShowAll() .Maybe something works. Link to comment Share on other sites More sharing options...
Videlais Posted June 3, 2014 Share Posted June 3, 2014 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. Link to comment Share on other sites More sharing options...
momonz Posted June 4, 2014 Author Share Posted June 4, 2014 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. My goal is to make the game appear at center. The images' resolution I am using is lower than that of the nexus 7. So I have to display the game at center. Is it possible to center the canvas or even the world? I can't think of how I can do it. I can't find a left or x property to move the canvas/world when in canvas+ You are right about the canvas+ ignoring the css styles, that's why the property "pageAlignHorizontally" is useless in canvas mode. And I was able to center the image if I set the exact x-coordinate when adding a sprite. But ofcourse I have to set it for every add sprite calls (or someone else might have a better idea). Thank you guys for all your help Link to comment Share on other sites More sharing options...
plicatibu Posted June 4, 2014 Share Posted June 4, 2014 Can't you use CSS to center the canvas? Link to comment Share on other sites More sharing options...
momonz Posted June 5, 2014 Author Share Posted June 5, 2014 That seems to be the easiest fix but it doesn't work. The canvas stays at 0, 0. I doubt if we can reposition the canvas as it is always set in fullscreen: http://blog.ludei.com/cocoonjs-a-survival-guide/ Another solution I can think of now is to create a new container for all and center that. Link to comment Share on other sites More sharing options...
Zaidar Posted June 5, 2014 Share Posted June 5, 2014 You need to put a background, otherwise Cocoonjs just try to fill with the sprite. Link to comment Share on other sites More sharing options...
Videlais Posted June 5, 2014 Share Posted June 5, 2014 Is it possible to center the canvas or even the world? I can't think of how I can do it. I can't find a left or x property to move the canvas/world when in canvas+ You are right about the canvas+ ignoring the css styles, that's why the property "pageAlignHorizontally" is useless in canvas mode. And I was able to center the image if I set the exact x-coordinate when adding a sprite. But ofcourse I have to set it for every add sprite calls (or someone else might have a better idea). 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. Can't you use CSS to center the canvas? 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. Another solution I can think of now is to create a new container for all and center that. 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. Link to comment Share on other sites More sharing options...
momonz Posted June 6, 2014 Author Share Posted June 6, 2014 Hi Videlais, we already have proper scaling implemented, it's just that the image (background) is smaller than the device screen. Also the image we have and the device has different aspect ratio thus there would be letterbox on the sides when centered. What I proposed to our project is to have a group container and from that we will center the group. I got the idea from here:http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/#entry21373 Link to comment Share on other sites More sharing options...
Recommended Posts