Search the Community
Showing results for tags 'Screen'.
-
this seems a rudimentary task, but i'm actually having trouble implementing a title screen into a game. i've saved this task for last thinking it simple, but i can't seem to find a way to do it cleanly. i believe the creation of "states" is involved, but i can't figure these out, and the one example on the phaser website is hopelessly confusing. everything in this project thus far is located in a single "game.js" file. i tried making a separate "title.js" and going from there, but perhaps this is the wrong approach. i simply want something that occurs before the game.js, shows a static image, and when anything is pressed (either keyboard or mouse) it launches "game.js". any example of this would be great.
-
Hi everyone.. I'm here again with a fresh question... I'm trying to do create custom loading screen.. A lot of topic inside of the forum anf i have already read document about loading screen, and also i did some thing (you can find PG link below and if you want you can update it) but how we can add a video to the loading screen background i couldn't find a solution or sample, and also i can't count items on the scene... PG Link: https://playground.babylonjs.com/#WV4PLS Somebody can show me the way about this? Thanks in advance..
-
Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can tell me please what's the wrong? CSS body { background-color: rgb(0, 0, 0); width: 100%; height: 100%; overflow: hidden; } #pixi-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } JS const logicalWidth = 1280 // window.innerWidth; const logicalHeight = 720 // window.innerHeight; // Init Application let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true }); app.view.id = 'pixi-canvas'; // Add canvas to DOM document.body.appendChild(app.view); { ... } let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg"); rootContainer.addChild(background); app.stage.addChild(background); { ... } this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); window.addEventListener('resize', () => { this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); }); private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) { const scaleFactor = Math.min( window.innerWidth / logicalWidth, window.innerHeight / logicalHeight ); let newWidth: number = Math.ceil(logicalWidth * scaleFactor); let newHeight: number = Math.ceil(logicalHeight * scaleFactor); console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor}); renderer.resize(newWidth, newHeight); stage.scale.set(scaleFactor); }; RESULT
-
Hi, all! https://jsfiddle.net/OlegShaygu/ra303eu9/12/ Is it piossible to refuse black screen delay when the game starts? It happens on first milliseconds of the start.. Thanks in advance
-
Hi, While I take iframe code from other website to load game on my website, I want that the external link put within the game does not load. I see many websites do it. Can anyone please let me know how to do it? Thanks
-
Hi, I have a problem with a phaser android game, build with Phonegap, in the android 4.4.2 version, the canvas is showed in the middle of the phone screen, showing the rest of the screen in black. You can move this canvas to position 0,0 after the screen is showed. In other android versions this does not happen. The game is shown in landscape mode, but in portrait mode the same thing happens. I add a screenshot of the game to show this problem. I appreciate any help. The android game is published in https://play.google.com/store/apps/details?id=com.phonegap.WackTrump. Thanks in advance. Greetings.
-
Hi guys, I'm trying to make 2D-shapes / 2D-sprites in my Canvas2D (ScreenSpaceCanvas) follow some sprites which are placed in my 3d world. For this, I'm using the BABYLON.Vector3.Project function as followed: However, this is the result: I've checked each of the arguments and they all contain valid values at the time of being called. I've also stumbled across this topic, which uses another 4th argument in the call, but I've had no luck trying it with that one either. Any ideas? Thanks in advance!
-
Hi I have a scaling question. I'm working on a multiplayer tile based driving game where the camera is following the car. I want players to see the same of the map regardless of their screen resolution. So for example if I have 1024x768 as my base size and tiles are 64x64 pixels which will mean 1024 / 64 = 16 tile cols will be visible to the player. If someone opens my game with 1280x1080 as their resolution I don't want them to see 1280 / 64 = 20 tiles but instead scale the graphics and tiles to 1280 / 16 = 80 x 80 pixels per tile. Is there any automated way of doing this or do I need to manually calculate everything and scale all my art? -
Hello everyone, I'm new to the game development realm. I am in the process of creating a game that will receive touch input from a PQ Labs Multi-touch overlay screen. The screen will support 32+ touch points. I would like to ask if anyone has tried creating or created a game with a similar type of multi-touch screen. If yes, could you share your insights and advice? This display comes with its own drivers and provides various SDKs, none of which is in JavaScript. I am not sure if the input is considered by the system as native touch, since I don't have the screen yet (I'll have it in a week or so). Supposing I overcome the issue of reading input from the screen and using it in my Javascript application, what could be the best way to go about using Phaser's input methods with this screen? Would I need to hack into the Input api? I hope what I ask makes sense. Thanks for the help in advance.
-
Good day to all! I have a question on Phaser's world-to-screen transformations, and I've googled almost nothing on it Is there a way to transform a sprite's world coordinates into the screen space (and visa versa)? It is a very useful feature and I can't beleave nobody still interested in it! I found poor documented Sprite.worldTransform.tx, Sprite.worldTransform.ty,but I'm not sure these fields always work properly (to be honest, I am sure they don't). Thank you!
-
Hello there. I'm making a simple game to understand phaser better. I have made a simple game using this resolution: phaserGame = new Phaser.Game(480, 720, Phaser.AUTO, ''); So, i can center this on screen etc. However, if i wish the game to be resized to fit the screen in desktop and mobile devices, what would be the best way to do ? Thanks again for any attention
-
var p = BABYLON.Vector3.Project(vector, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), camera.viewport.toGlobal(engine)); it's return P { x: NaN , y: NaN} camera.viewport.toGlobal(engine) is null e {x: NaN, y: NaN, width: NaN, height: NaN} i find google and the result page is return the NaN too. http://www.babylonjs-playground.com/#UWSIL#1 I use it this function last month, and it worked. but now didn't work. I don't konw why? help...
-
Hey guys, I have a weird issue. After my game has stayed idle for a while and I am currently using another tab, the game turns black. And the weird thing is that if I switch back to another tab quickly and move back to the game - it fixes itself o_0. Also on android the game does not want to turn back from black. The buttons in the game are clickable, I believe this is render related, but I have no idea what could it be. What could be the reason?
-
Hola! I wanted to take a screenshot of my game and download it to the user's device. I have this working, almost except that on my iPhone5s in Safari, the downloaded image is upsidedown. To get the screen shot I use my code below (specifically, the toDataURL() function). On my desktop, the downloaded image is oriented the right way. But not in Safari mobile. I don't have Safari Desktop to try it there, so I'm not sure if mobile vs. desktop makes a difference. Has anyone dealt with this? Know of any work arounds? Thank you in advance! saveCanvas : function () { var link = document.createElement('a'); link.href = this.game.canvas.toDataURL('image/png'); link.download = 'Highscore.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }
-
Hi! I was wondering if in Babylon js exists rendering 2D text on screen? I would need this for my 3D model dimensions. Here is an example URL: http://www.cadstudio.cz/img/ext/ai-dim3d.gif (numbers for dimensions are what I want to achive). I am familiar with DynamicTextures but in DynamicTextures I would require a 3D model so I could display my text. And in my model I would like to see text always perpendicular to the camera. Here is what I have in my mind URL: http://drivingdimensions.com/uploads/img/65_rectangle8.png If you look at first URL and second URL, you notice that text in second URL rotates so that it is always perpendicular to the camera. To simplify my question I need to render 2D text and the text needs to be perpendicular to the camera (even If I would rotate the camera around the object it would still stay perpendicular). Can anyone help me with this?
-
I tried to cover the whole screen aka 480x720 canvas with a text field, font size 150 and also set width and height to 720 and 480 accordingly but no success. I want to cover the screen with semitransparent text and as I type on my keyboard I should see the letters I type. How can I achieve this?
-
Hi, Im trying solve a problem that i think be simple to a phaser expert dev. My multiplayer game is working nice, but when i resize the browser the game be smaller or blurred with black parts. I need resize browser and camera follow player on center and everything on tiled map stay at the same state if i reload on the new size. Example: 1 - If i start my browser at 800x600 everything will work nice at this resolution. If i resize to 1024x768, the images are blurred and black parts are showed. I need that it resize to be at the same state that if i open on 1024x768 2 - If i start my browser at 1024x768 everything will work nice at this resolution. If i resize to 800x600, the images scale down. I need that everything stay as i reload on 800x600. My starting code: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setScreenSize = true; Can anyone help me?
-
I'm creating a game targeted at multiple mobile devices including ios, android and RIM blackberry. All these devices have multiple screen resolutions and varying aspect ratio's. My game is a side scroller, similar to Run-Pixie-Run. I quite like the idea of scaling the tiles / sprites up to match the vertical resolution of the screen, and then just exposing more or less of the right-hand-side depending on the horizontal resolution, as is done in Run-Pixie-Run. What is the best strategy for this? Is there support in Phaser / Pixi to assist with this? I attach 3 image examples of how Run-Pixie-Run scales.
-
Hello everyone I am now joining the forum, and have now started using intel XDK, to create a Phaser project. However, the default project created by XDK, has some errors. It doesn't prevent the app from running (I can see a rotating bear on the screen), but I fear those errors will spell trouble. Here are the errors: 10 JSHint Problems×Line Problem Code snippet4 'document' is not defined. (W117) document.addEventListener('DOMContentLoaded', function()7 'PIXI' is not defined. (W117) var stage = new PIXI.Stage(0x66FF99);10 'screen' is not defined. (W117) var width = screen.availWidth;11 'screen' is not defined. (W117) var height = screen.availHeight;12 'PIXI' is not defined. (W117) var renderer = PIXI.autoDetectRenderer(width, height);15 'document' is not defined. (W117) document.body.appendChild(renderer.view);17 'requestAnimFrame' is not defined. (W117) requestAnimFrame(animate);20 'PIXI' is not defined. (W117) var texture = PIXI.Texture.fromImage("asset/phaser.png");23 'PIXI' is not defined. (W117) var phaserImage = new PIXI.Sprite(texture);37 'requestAnimFrame' is not defined. (W117) requestAnimFrame(animate); 2 JSHint Problems×Line Problem Code snippet11 'document' is not defined. (W117) document.addEventListener('deviceready', function() {13 'navigator' is not defined. (W117) navigator.splashscreen.hide(); 4 JSHint Problems×Line Problem Code snippet21 'BasicGame' is not defined. (W117) BasicGame = {26 'BasicGame' is not defined. (W117) BasicGame.Game = function (game)32 'BasicGame' is not defined. (W117) BasicGame.Game.prototype =49 'Phaser' is not defined. (W117) this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; The codes are just the default. If you would like me to post the codes I can do so.I appreciate any help I can get on this. Thanks
-
Hello all, previously i asked about how to change screen size dinamically, but even if i do that a few parts of the screen will be unused. Example: ipad's have 768x1024 res, but some phones has 1280x720, so even if i use the scale capabilities from phaser i'll get some screen unused. How you people deal with this? Move camera? Better outer decorations? Looking for ideas, and any comment is welcome.
-
Hi, Half of the screen becomes black when I play your game on Chrome in Android in order to have a yellow background for the entire game, in the boot state I'm using : preload: function(){ this.game.stage.backgroundColor = 0xFFFFCC;..} but result show half screen yellow+half screen black. and any solution ?, what is the cause ? Thank you
-
Hi, First of all, I'm just moving to Phaser game engine to develop even more quality games. I've been using my own game engine and I enjoyed it. But to keep up with the dev speed, developing more game engine features to follow up my need uses too much time than developing the game itself. So I am expecting some of the features may run as my expectation. As I am just jumping to this, I wish for lots of things to learn from you guys. -- I am currently developing a game that is expecting the game screen height not adjusting the size of the game world. Please see below picture on what happened when I have a bigger height/resize the height (Below are samples only, please don't calculate the width/height based on the picture). Normal, expected Bigger height, the game UI is cut as they become larger. The game is scaled bigger, following the height. Even bigger height, the game UI is further cut as they become larger. Same case as previous one, the game is scaled even further, following the height. My expectation is like one of the game I made: http://cake-robot.alectora.com/ Try starting it with your desktop browser with landscape size, and then try playing with only the height. It gives example that it doesn't scale the game size (the sprite size stays the same). The game is only resized when you play the width of the window. I used the game.scale SHOW_ALL (and tried other options), playing with aspect ratios, and still I can't make it like the game I mentioned. Any solution to this? Thank you!
-
Hi. Launch the game on the S3 Stock Browser, the game screen is loaded twice: Game link: http://rivasgames.com/games/10x10-skin1/ Phaser v2.2.2, Canvas mode Please, help fix this issue!
-
Hi, I am developing an app, where I would like to see the orientation of the screen kept to Portrait. After many searches on google, I gave up and just went ahead with building a simple prototype of my app idea. I have now come to a stage where I should deal with the orientation aspect of the app. After studying the book: Phaser Scale manager for Phaser 2.2.2, I have tried to use the following code in my app: if (game.device.desktop === false) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.forceOrientation(true, false); game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); }I am new to Phaser and programming generally. I earned a distinction in the Coursera: Intro to computer programming in Python.I have found that what I have learn't in that course is easily transferable to JavaScript and Phaser, yet, I am still learning. Maybe if this problem can be resolved, it would help other people new to Phaser on the forums also. Codenburger
- 2 replies
-
- 1
-
-
- Screen
- orientation
- (and 3 more)
-
Upon game over I am trying to render the screen on a texture which would be passed on the next state as a background. Sofar I have implemented this, but I end up with a black screen instead. In the game state I do this: this.texture= new Phaser.RenderTexture(this.game, this.game.width, this.game.height);this.texture.renderXY(this.game.stage, 0, 0);In the new state I set the texture as a background: this.background = new Phaser.Sprite(this.game, 0, 0, this.texture);Any ideas? Thanks
