Сегодня настал день, когда можно сказать, что я сделал игру (90%) на html5 и она работает на мобильных устройствах (оказалось не тоже самое, что просто в браузере с определенным размером и слушателями). Примерно ушло 3 недели на всё.
Использовал
CreateJS.
Код:
<!-- PreloadJS library for assets preloading-->
<script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>
<!-- EaselJS library for work with canvas-->
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
Самое важное, что я разобрался как работать с несколькими классами, как их импортировать и переключаться между друг другом. Пытался максимально приблизиться к as3 по структуре, но до этого далеко. По крайней мере мне так и не удалось нормально работать с несколькими объектами одного и того же класса (item.js).
Импортируется класс так:
Код:
<script src="javascript/main.js"></script>
Отвечая на ваши вопросы. У меня игра как и простая страничка отображается в браузере
Код:
<body onload="init();">
<table id="tbl_wrap"><tbody><tr><td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered -->
<canvas id="canvas" width="700" height="600" style="border: thin gray solid;"></canvas>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td></tr></tbody></table>
</body>
По поводу размера, сделал резиовую верстку, игра узнает размер девайса таким образом:
Код:
_W=document.body.clientWidth;
_H=document.body.clientHeight;
и от этих констант уже отталкиваетесь.
Еще очень важный момент. Есть такая константа как
scaleGraphics (название сам придумал, можете поменять). Она вам поможет в верстке объектов, чтобы на всех девайсах размер выглядел одинаково. Если у вас на флеше фикированный размер 700*600, то в html5 будет так
Код:
scaleGraphics = Math.min(_W/700, _H/600);
Если вы игру делаете для копьютеров, то этих заморочек не надо)
Вход
Регистрация
FlashGameRatings
GameDevBlogs
Игры и цены
Наши правила
Поиск
