How can I modify my game to scale appropriately for mobile platforms?

Question

I've created this game. Now I want this to be portable or running in mobile and tablet browsers as well.

I have tried almost all kind of techniques for achieving this like using <iframe> which only adjusts the outside size and never changes the content size. I have even tried applying zoom on the <canvas> tag which will end up not responding of <canvas> tag.

Do I have to remake the game for different mobile resolutions every time, or is there any method to scale it according to screen device height and width, so that the content of <canvas> tag is fully shown?

So what can I do? BTW I have also tried media queries and seems like they won't work for me because I have used preloaded in JavaScript to load my files and stuff. I would love to get any help.

P.S how does my shared link, game works on different resolutions? Any method you want to discuss or any new search on this rescaling dynamically for different resolutions of <canvas> tag.

I have asked a simillar question: http://stackoverflow.com/questions/13157586/full-screen-canvas-on-mobile-devices — XCS, Jul 13 '13 at 20:43
codecanyon is a marketplace. Try linking to a not-for-sale version and you might get a better response? — Jarrod, Jul 15 '13 at 03:45
Ok jarrod ,Next time i will keep this in mind.Thanks for telling ! — Yawr Mailk, Jul 16 '13 at 10:28

score 0 · Answer 1 · answered Jul 13 '13 at 20:52

The real answer would be to modify your game to be able to scale its viewport to fit mobile devices.

A quick hack would be to proportionally scale canvas in CSS and then un-scale the events in your game.

This quick-hack is for testing...the real answer is for production !!

Here is a quick-hack and a Fiddle: http://jsfiddle.net/m1erickson/q7SV6/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var circleX=250;
    var circleY=250;
    var circleR=40;

    // In this illustration, the canvas is square
    // Since your canvas is probably not square
    // You would need to break into downScaleX and downScaleY
    var downScale=3;

    ctx.beginPath();
    ctx.arc(circleX,circleY,circleR,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();

    // use css to scale down the canvas
    var newWidth=parseInt($("#canvas").css("width"))/downScale;
    var newHeight=parseInt($("#canvas").css("height"))/downScale;
    $("#canvas").css("width",newWidth).css("height",newWidth);


    $("#canvas").click(function(e){

        var canvasOffset=$("#canvas").offset();
        var offsetX=canvasOffset.left;
        var offsetY=canvasOffset.top;
        // adjust the mouse X/Y  for the downScale
        var x=parseInt(e.clientX-offsetX)*downScale;
        var y=parseInt(e.clientY-offsetY)*downScale;

        var dx=x-250;
        var dy=y-250;

        if(dx*dx+dy*dy<40*40){
            alert();
        }

    });



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

How can I modify my game to scale appropriately for mobile platforms?

1 Answers1