Как задать размер канвы, как убрать консоль

  1. 6 г. назад

    Доброго времени суток!

    Добрые люди! Подскажите начинающему как решить сей «чрезвычайно сложный» вопрос, как задание разрешения/размера Canvas/рабочей области… или как оно там по-латыни. Понимаю, что вопрос глупый, но для меня стоит весьма ребром :(

  2. devolonter

    5 Jun 2014 Администратор

    Приветствую!

    После сборки проекта идем в папку .build/html5. Открываем MonkeyGame.html текстовым редактором (например, Notepad++ ) и меняем значения атрибутов width и height тега canvas на желаемые.

    Например, чтобы поменять размер рабочей области с 640x480 на 800x600 замените:

    <canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=640 height=480 tabindex=1></canvas>

    на:

    <canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=800 height=600 tabindex=1></canvas>

    Чтобы удалить консоль, просто удалите в MonkeyGame.html следующую строку:

    <textarea id="GameConsole" style="width:640px;height:240px;border:0;padding:0;margin:0" readonly></textarea>

    После внесения изменений не забудьте сохранить файл и заново собрать проект.

  3. Премного благодарен :)
    Результат превзошёл ожидания, даже скролов нету лишних! Ура!

    А существует ли способ сделать что бы рабочая область была 100% от содержимого страницы? ( width=100% height=100% воспринялось как 100х100 точек )

  4. devolonter

    5 Jun 2014 Администратор

    Существует. В этой же папке открываем main.js и устанавливаем RESIZEABLE_CANVAS=true. Сохраняем, пересобираем. Размер канвы будет автоматически меняться в зависимости от размера окна.

  5. Для авторазмера я использую следующее решение:

    <script type="text/javascript">
            var canvas = document.getElementById("GameCanvas");
            
            /* autosize */
            (window.onresize = function(i) {
                    canvas.width  = window.innerWidth;
                    canvas.height = window.innerHeight;
            })();
            
            // Focus canvas
            canvas.oncontextmenu = function(){ return false; }      
            canvas.focus();
    
            // Clear console
            var textarea = document.getElementById("GameConsole");
            textarea.value = "";
    </script>

    Отличие в том, что игра подстраивается под размер браузера в реальном времени.

или зарегистрируйтесь чтобы комментировать!