Flashgamedev.ru | Разработка и Монетизация Флэш игр
http://flashgamedev.ru/

HTML5 — Вопрос - ответ
http://flashgamedev.ru/viewtopic.php?f=20&t=8545
Страница 1 из 143

Автор:  Zebestov [ Чт дек 12, 2013 12:00 pm ]
Заголовок сообщения:  HTML5 — Вопрос - ответ

Всем привет!

Решился на небольшую авантюру, связанную с разработкой игры на HTML5 для десктопа и мобильных платформ.
На первых этапах как всегда имеются вопросы и, наверняка, не у меня одного. Приглашаю задавать их в этой ветке.

Просьба ко всем, кто задает вопросы или дает ответы, обозначать язык программирования, если это не javascript (а, например, typescript).
Также уместно будет сразу указывать фреймворк, с которым вы работаете, если таковой имеется.

Автор:  Zebestov [ Чт дек 12, 2013 4:31 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

По поводу предоставляемого порталами "контекста выполнения" — это iframe.

Автор:  Apelmon [ Чт дек 12, 2013 4:48 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Zebestov писал(а):
Ответ на первый вопрос — iframe.


А можно подробнее или ссылку?
Пожалуйста.

Автор:  J0x [ Чт дек 12, 2013 6:03 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Сегодня настал день, когда можно сказать, что я сделал игру (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);

Если вы игру делаете для копьютеров, то этих заморочек не надо)

Автор:  Zebestov [ Чт дек 12, 2013 6:35 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Apelmon писал(а):
Zebestov писал(а):
Ответ на первый вопрос — iframe.

А можно подробнее или ссылку?
Пожалуйста.

Про iframe подсмотрел на том же kongregate. Но вот на mobile.mindjolt.com, например, уже div.

J0x, скажи, а кто отвечает за то, чтобы страница в мобильном браузере развернулась в "фуллскрин"?

Автор:  hanuman [ Чт дек 12, 2013 7:21 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Zebestov писал(а):
кто отвечает за то, чтобы страница в мобильном браузере развернулась в "фуллскрин"?


На iOS например Apple отвечает чтобы страница не разворачивалась в фулскрин, по крайней мере в iOS7...

Автор:  J0x [ Чт дек 12, 2013 7:30 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Цитата:
J0x, скажи, а кто отвечает за то, чтобы страница в мобильном браузере развернулась в "фуллскрин"?


Я не стал искать про "фуллскрин", т.к. с вкладками, но на всю страницу игра смотрится в полне симпатично и удобно. Можно в любой момент переключиться на другие вкладки, не нужны дополнительные кнопки для выхода и лишних действий.

Автор:  Zebestov [ Чт дек 12, 2013 7:42 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Однако если не "хакать", то в родном сафари на том же iPod Touch 4 от страницы остается почти квадрат (в ориентации portrait) — а это сильно выбивается из общей вполне себе "прямоугольной" картины.

Автор:  J0x [ Чт дек 12, 2013 8:28 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Zebestov писал(а):
Однако если не "хакать", то в родном сафари на том же iPod Touch 4 от страницы остается почти квадрат (в ориентации portrait) — а это сильно выбивается из общей вполне себе "прямоугольной" картины.

я сначала тетсирую на компе в браузере, меняю его ширину и высоту как угодно, у меня и квадрат и прямоугольник (вертикальный/горизонтальный), везде устраивает как верстка резинится. ну может это еще из-за того что жанр игры такой (в космосе). но GUI в полне адекватные.
А вообще, делать просто относительно одной стороны _W или _H и по ней все масштабировать, а по краям пусть будут тогда прямоугольные черные линии.

Автор:  Zebestov [ Чт дек 12, 2013 8:43 pm ]
Заголовок сообщения:  Re: HTML5 — первые шаги

Понял.

Новый вопрос — можно ли в HTML5 как-то "запечь" масштабированный и повернутый Image, чтобы потом уже именно его "штамповать". А то кручение-верчение контекста под каждую картинку мне видится какой-то лютотОй :)

Страница 1 из 143 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/