Я нахожусь в процессе создания игры JavaScript / HTML5 (с использованием Canvas) для мобильных устройств (Android / iPhone / WebOS) с PhoneGap. В настоящее время я пытаюсь определить, как должен быть построен пользовательский интерфейс и игровая доска, и как они должны взаимодействовать, но я не уверен, какое из них является лучшим решением. Вот что я могу придумать -
Создайте пользовательский интерфейс прямо на холсте, используя такие вещи, как drawImage и fillText. Создайте части пользовательского интерфейса за пределами холста, используя обычные объекты DOM, а затем поместите div на холст, когда элементы пользовательского интерфейса должны перекрывать холст игровой доски. Существуют ли другие возможные методы, которые я могу использовать для создания игрового интерфейса, о которых я не думал? Кроме того, какой из них будет считаться «стандартным» способом (я знаю, что HTML5-игры не очень популярны, так что, вероятно, пока нет «стандартного»)? И, наконец, какой путь вы бы рекомендовали / использовали?
Спасибо заранее!
источник
Ответы:
Оба решения (рисование на холсте против традиционного HTML / CSS) полностью действительны и будут работать просто отлично. Некоторые вещи для рассмотрения:
Часть этого будет субъективной; Разработчик, которого я знаю, всегда предпочитает использовать canvas, поскольку он просто считает DOM уродливым и многословным. Так как любое решение будет работать нормально, я бы выбрал простой единственный экран в вашем приложении, быстро разработал его отдельно, используя оба метода, и увидел бы, какой из них удобнее / лучше.
Удачи!
источник
Я использую мольберты для взаимодействия с холстом.
Это довольно хорошо и облегчает прочный дизайн. Одной из ключевых особенностей, которые заставили меня выбрать, была возможность синхронизировать положение ваших объектов Canvas и элементов DOM.
Это позволяет легко создавать CSS-пузыри речи и статические элементы пользовательского интерфейса, такие как рамка hud и тому подобное.
Преимущество, которое это имеет для браузеров, состоит в том, что вы получаете богатый холст, но вы можете закладывать меньшие и статичные вещи в дом, чтобы контролировать производительность.
источник
Холст медленный на мобильных платформах, по крайней мере, мобильное сафари в любом случае, так что вам нужно использовать позиционирование объектов на основе CSS. В частности, используйте «translate3d», который включает аппаратное ускорение рендеринга объектов.
Взгляните на библиотеку CAAT для canvas, это быстро, и вы можете использовать CSS «поддерживаемых» актеров, а не изменять игровую логику.
Я пока не могу опубликовать ссылки, но вот некоторые псевдо-ссылки http://labs.hyperandroid.com/animation
источник
Нужно согласиться с медлительностью холста на iPhone 4. Уверен, холст для сафари не поддерживается GL. Моя дурацкая игра работает быстро на iPhone 3GS и Android, но на iPhone 4 я думаю, что дисплей сетчатки имеет слишком много пикселей, или, если холст не движется на GL, это объясняет, почему он тянет. Мне нравится модель разработки canvas, я еще не пробовал использовать css translate3d. В частности, я использовал GWT и обертку для холста gwt-g2d (оптимизация / обфускация). http://www.photonjunky.com/shootout.html
источник
Я бы предложил сохранить ваши элементы управления в виде HTML-элементов, таких как
menu
иcommand
по причинам доступности. Используя немного CSS, вы можете отображать элементы поверх холста , не теряя при этом встроенную функциональность HTML.источник
Я знаю, что это старый вопрос, но сегодня (март 2013) мы знаем лучше. Я решил ответить на случай, если кто-то еще наткнется здесь, как я. Я должен не согласиться с большинством других ответов. Они, вероятно, действительны для разработки веб-браузеров, но не для мобильных устройств. Это имеет большое значение, какой путь вы выбираете (DOM или холст анимация). Веб-представление Android совершенно бесполезно (медленное, заикающееся) само по себе, что делает PhoneGap бесполезным для разработки игр для Android, если только вы не можете применить аппаратное ускорение, которое в настоящее время возможно только с использованием анимации холста и подходящего фреймворка. Для получения дополнительной информации см. Этот ответ .
источник
Вы можете сделать это миллионами способов. Однако вы чувствуете себя наиболее комфортно, а ваши инженеры чувствуют себя наиболее уверенно.
Если вы ищете вдохновение или пример кода, вот один из способов, которым я это делаю. У меня есть функция, которая несколько раз рисует меню, пока не нажата кнопка. Когда кнопка нажата, игра загружается и старые прослушиватели событий щелчка по меню удаляются, и добавляются новые слушатели событий щелчков игры. Я также заканчиваю старый цикл прорисовки меню и начинаю новый цикл прорисовки игры. Вот некоторые отобранные фрагменты, чтобы дать вам представление о том, как это делается:
Таким образом, я могу отделить игровой рисунок и игровые события от рисования меню и событий меню. Это также дает мне возможность использовать элементы меню / анимации в моих меню, если я хочу, чтобы они выглядели очень красиво.
источник