heban Posted November 2, 2013 Share Posted November 2, 2013 Hi all. Firstly, I want to apologize for my english, when I got more time I should spend this time for learning. I make my first html5 game - simple race game on planet Mars. I have trouble with viewport on my mobile device. I created big race map with resolution 6000px x 3000px. Viewport has screen resolution, for example my laptop has full hd resolution so viewport has about full hd resolution. I created two canvases, one for big map and this canvas isn't connected to the DOM, he is like a buffer. Second canvas is a viewport for game and this viewport follows the player. I copy from big canvas to viewport data and this solution runs quite good on different browsers. But I have problem with BlackBerry Z10 viewport. Take a look of example screens: Laptop piece of screen: BlackBerry Z10 piece of screen: Second screen has a problem with weird scaled width. Coordinates are good, same on two devices. I don't use scale property of canvas, but this is look like a bug on BlackBerry Z10.Canvas viewport has in css styles: 100% width and 100% height, tag <body> too. Width and height of viewport is respectively: window.innerWidth, window.innerHeight. For problems with retina's display I use these code in <head> section:var meta = document.createElement("meta"); meta.setAttribute('name','viewport'); meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no'); document.getElementsByTagName('head')[0].appendChild(meta);Code which I used in my game to draw one canvas from another:intense.renderSystem('TrackRenderSystem', { components: ['2D'], manual: true, priority: 1, init: function () { var img = intense.assetManager.get('track_color.png'); this.canvas = document.createElement('canvas'); this.canvas.width = img.width; this.canvas.height = img.height; this.context = this.canvas.getContext('2d'); //buffer canvas - big map this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height); }, update: function () { this.drawTrack(); }, drawTrack: function () { var ctx = intense.context, <--- context and canvas of viewport canvas = intense.canvas; ctx.clearRect(0, 0, canvas.width, canvas.height); // ------- drawing from viewport. MB.conf.vX and MB.conf.vY are shift from the left top corner. ctx.drawImage(this.canvas, MB.conf.vX, MB.conf.vY, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); } });Well, I don't know what to do. In many browsers and many resolutions on my laptop this viewport looks good, but on Z10 looks weird. Coordinates are good, but game isn't looks good. Car looks good, no problem with drawing this part, but drawing piece of large canvas blow my mind. Maybe Z10 has a bug. Has anyone encountered anything like this problem? I know, there is a technique with map tiles, but i don't have a time for big changes in my game. Thx for help/discussion. Quote Link to comment Share on other sites More sharing options...
heban Posted November 2, 2013 Author Share Posted November 2, 2013 I resized image map to 4000x2000 and problem does not exist, same result on laptop and Z10. I think it's a bug of BlackBerry Z10. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.