Cocos2d-JS で画面サイズを変更する

2015年6月16日 TOME Leave a comment

Contents

1 ブラウザ上のキャンバスサイズ
2 Cocos2d 内部のデザイン画面サイズ（ピクセル解像度）
3 Resolution Policy

ブラウザ上のキャンバスサイズ

HTMLの canvas 要素として指定します。Cocos2d-JS のサンプルでは ./index.html で指定されているので、所望のサイズに変更します。

./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>

Cocos2d 内部のデザイン画面サイズ（ピクセル解像度）

Cocos2d 内部でピクセルデータを処理する際に使用される画面サイズです。

Cocos2d-JS のサンプルでは ./main.js で cc.EGLView.setDesignResolutionSize() メソッドによって指定されています。ほとんどの場合、さきほどブラウザ上のキャンバスサイズに指定したものと同じサイズを指定することになると思います。このメソッドの第3引数 Resolution Policy については以下で説明します。

./main.js

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, disabled by default to improve performance
    cc.view.enableRetina(false);
    // Adjust viewport meta
    cc.view.adjustViewPort(true);
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();