Обсудите HTML5-игры с экспертами — ресурсы и стенограмма

Поэтому я считаю, что мы можем начать. @ mb4 и @SitePoint_Paul, не могли бы вы, ребята, рассказать о том, что вы делаете при разработке игр?

и, поскольку вы уже упоминали об этом в статье, HTML5 — это игры JS, верно?

@YamilG это верно.

Я сделал только несколько HTML5-игр, в частности, с использованием Canvas 2D и SVG.

Я пытаюсь написать несколько простых онлайн-игр, но я не уверен, что мне следует использовать. Должен ли я разрабатывать в HTML5 / Javascript? Каковы его ограничения?

@programmer Единственная альтернатива использованию HTML / Javascript — это плагины типа flash.

Является ли Java другой альтернативой?

Это проще или сложнее, чем Flash?

… И Flash не продвинет вас далеко на мобильных устройствах, как и Java.

Он все еще довольно новый, и пока нет таких великолепных фреймворков, как Flash, чтобы сделать разработку HTML5 легкой.

Вспышка дорогая.

Так что да, это сложнее, потому что вам все еще нужно выполнять большую часть тяжелой работы самостоятельно.

@programmer да, HTML5 довольно дешев в разработке за $ 0,00

@ markbrown4 Ха-ха

Тем не менее, некоторые из ранних игровых фреймворков, таких как Impact.js, довольно дороги по цене $ 99

У меня есть альтернатива с открытым исходным кодом, которая создаст Flash, но кривая обучения крутая.

Я был очень впечатлен проектом BrowserQuest ( http://browserquest.mozilla.org/), насколько сложно создать такую ​​игру? Я имею в виду, сравнить с традиционным gamedev

Так что насчет ограничений? Игры HTML5 / JS ограничены Pacman и Tetris, или мы увидим более масштабные игры?

@yamilG, выглядит потрясающе 🙂 раньше такого не видел.

@Cuebit вы наверняка увидите более впечатляюще выглядящие игры, чем эта.

С такими вещами, как Unity3D, можно сделать несколько довольно модных игр.

Cuebit: безусловно, будут более масштабные игры, чем Pacman / Tetris. WebGL поможет на фронте для графики.

как насчет canvas vs svg… стоит ли начинать сейчас обращать внимание на svg или просто сосредоточиться на canvas?

Paul_Wilkins: насколько я знаю, игры Unity3D могут работать только в Интернете с помощью плагина?

@YamilG Создать игру наподобие browserQuest не так просто.

Насколько хорошо это звучит?

Вы можете довольно легко освоить основы настройки рендеринга с помощью быстрой петли и рендеринга объектов Canvas в разных положениях с различным состоянием.

diogo: Лично я считаю, что Canvas намного лучше подходит для создания игр, но SVG может быть полезен и для векторной графики. В идеале вы должны знать, в чем каждый из них хорош, чтобы вы могли выбрать правильный инструмент.

как насчет порта Google Quake II, который был переписан с помощью веб-технологий или просто как «эмулятор», переводящий оригинальную игру в HTML5? чтобы вы посоветовали?

Я имею в виду, если вы хотите воспроизводить звуковые клипы, а также записывать голос пользователя, например.

YamilG: согласно странице, «в порту мы используем WebGL, Canvas API, элементы HTML 5 <audio>, локальное хранилище API и WebSockets, чтобы продемонстрировать возможности чистых веб-приложений в современных браузерах, таких как Safari и Chrome. . ”- http://code.google.com/p/quake2-gwt-port/

теперь, когда мы получаем больше устройств с графикой высокого разрешения на дюйм (новый MBP или iPhone 4), нужно ли будет думать с точки зрения большего количества векторной графики (svg) вместо фиксированных размеров png? Есть ли другие методы, чтобы справиться с этим?

Кстати извините за мой плохой английский …

@programmer Я еще недостаточно сделал с Audio API, но это определенно можно сделать.

@YamilG В последнее время я немного занимаюсь сетчаткой

Не обязательно.

Canvas на самом деле имеет свойство dpi-density, которое вы можете удвоить для рендеринга в 4 раза пикселей

YamilG: высокий DPI, безусловно, не делает необходимым думать с точки зрения векторной / SVG-графики … но это будет одним из способов придания четкости изображению.

Изображения, которые вам просто нужно создать в 2х версиях по умолчанию, а затем масштабировать до половины размера при рендеринге.

YamilG: но масштабирование графики хорошо для многих игр, и Canvas также можно использовать для рендеринга изображений с высоким разрешением, а программно сгенерированные фигуры на холсте также могут иметь собственное разрешение.

@programmer проверить это http://www.html5audio.org/2012/06/google-io-turning-the-web-up-to-11.html

http://retinafy.me/ — отличная маленькая книга о том, как бороться с экранами сетчатки

Привет тем из вас, кто только что присоединился к нам. Я менеджер сообщества по SitePoint и модерирую эту сессию. Не стесняйтесь задавать вопросы в любое время.

http://createjs.com/ — еще один фреймворк для разработчиков игр, который выглядит неплохо. Вдохновленный вспышкой.

красивый! Я не знал о create.js, выглядит хорошо

знак благодарности

Я также следил за KineticJS: http://kineticjs.com/

Я еще не использовал KineticJS, но позаимствовал у него некоторые идеи, в частности, многослойный холст для более эффективного рендеринга.

W3C работает в API для подключения джойстиков, я думаю,

эти рамки выглядят многообещающе!

да, уже есть демоверсии для GamepadAPI.

В Chrome вы можете включить поддержку Gamepad API в chrome: // flags /

Я хотел бы увидеть книгу, объясняющую, как создать игровой движок с HTML5, который было бы неплохо иметь (sitepoint .. 🙂

@YamilG Я бы тоже его купил 🙂

Хотя на github есть немало двигателей

ну, @ markbrown4 … чего ты ждешь? начать писать сейчас: D

имеет ли смысл использовать более одного фреймворка в одной разработке?

Вам просто нужно копаться, проб и ошибок, читая документы

Diogo, зависит от структуры / библиотеки, я полагаю

не знал, что Chrome уже поставлял поддержку gamepadapi! : O

Если вы смотрите на создание игрового движка, то знание линейной алгебры действительно полезно. Вот отличный учебник: http://blog.wolfire.com/2009/07/linear-algebra-for-game-developers-part-1/

Случайный вопрос, вы, ребята, живете вне gamedev, если да, советуете ли вы стать разработчиком игр на полный рабочий день?

@YamilG нет, я работаю веб-разработчиком, поэтому сайты / приложения / игры на стороне.

@YamilG: Точно так же я создаю веб-приложения для жизни, а не игры. Я считаю, что это сложная отрасль на данном этапе. Ранние дни еще, хотя.

@YamilG Я думаю, что определенно есть возможность заниматься разработкой HTML5-игр, но нет ничего лучше, чем магазин приложений, который поможет вам монетизировать

Прочитав этот учебник по линейной алгебре, вы получите красивую библиотеку, которая поможет с векторной математикой: http://sylvester.jcoglan.com/

Поэтому вам нужно монетизировать другим способом, например, требуя регистрации / входа.

У меня есть вопрос @ Markbrown4. Я знаю, что у нас были некоторые реальные проблемы во время GeekGames с обманом людей. Это огромная проблема для разработчиков игр? Есть ли способы обойти это или это просто нормальный курс?

Таким образом, вы рекомендуете платную игру вместо рекламы в игре?

@HAWK, вы никогда не сможете получить что-либо на стороне клиента на 100%.

как насчет интеграции html5-игр с платформой facebook?

Как насчет взаимодействия с базой данных?

Безопасность 101 никогда не доверяет клиенту.

Таким образом, чтобы сделать игру безопасной, вам нужно принять конкретные данные от клиента и контролировать игровой процесс на сервере.

(и даже тогда люди могут использовать ботов, чтобы делать щелчки / прицеливания / ввод с клавиатуры)

Нет ограничений на стороне сервера

Конечно, это можно обезопасить, но вы должны быть очень конкретны на стороне сервера, что вы принимаете в качестве допустимого ввода.

Ключевой вопрос: с чего начать? и я имею в виду, детка степпинг

Есть ли шанс, что выйдет книга о разработке игр, от новичка до ниндзя или что-то в этом роде?

@YamilG приложения для Facebook — это в основном iframe, который встраивает ваш сайт в Facebook.

Дай мне попробовать снова. Скажем, у меня есть база данных с информацией, и я хочу использовать ее для управления игрой. Как мне это сделать?

Нет никаких реальных ограничений, которые затрудняют добавление игр в приложение на Facebook.

YamilG: «с чего начать» полностью зависит от того, чего вы надеетесь достичь. Что касается меня, я только начал играть с API <canvas> и начал читать некоторые действительно базовые линейные алгебры и т. Д.

С чего начать? Вы можете начать с рисования вещей на экране, а затем сформировать игровой цикл, который получает входные данные (если есть), а затем обновляет экран.

@programmer, как и любое другое веб-приложение, будет взаимодействовать с базой данных.

YamilG: Если вас больше интересует создание актуального игрового контента и получение конечного продукта за дверью, тогда загляните в различные фреймворки и пропустите сложные вещи по созданию игрового движка 🙂

Но, поскольку вы не хотите использовать полное обновление страницы, вам нужно использовать Ajax / socket.io для связи

Работа с базой данных по-прежнему заключается в обработке входных данных запросов на стороне сервера и обновлении по мере необходимости.

Есть мысли о том, с чего начать создание HTML5-игры, такой как Risk?

@ markbrown4 Хорошо, тогда выучите Ajax?

Вот то, с чем я играл … Я создаю это без использования фреймворков или игровых библиотек: http://teven-b82df421.s3-website-us-east-1.amazonaws.com/

(На данный момент в игре нет никакого смысла, но вы можете нажать и посмотреть, как работают различные аспекты поиска пути и т. Д.)

Если вам интересно, я могу отправить исходный код на GitHub…?

Ну, 90% игры будут на стороне клиента, если вам нужно сохранить состояние во время игры, вам понадобится что-то вроде Ajax.

@ chrissergent мой друг рассказал мне о HTML5-Canvas-Cookbook

@ Диого, спасибо. Я нашел это, и я сохраняю ссылку.

@ chrissergent На самом деле я не рискнул, но на скриншотах это выглядит довольно просто.

в зависимости от того, что вы хотите, вам может не понадобиться и HTML5.

Многие элементы экрана могут быть построены с помощью HTML / CSS

@ markbrown4 Я бы хотел сделать игру более похожей на Axis & Allies, но я подумал, что больше людей знакомы с Risk.

Я просто добавляю эту ссылку, чтобы она была в расшифровке http://www.html5canvastutorials.com/cookbook/

Извините, тоже этого не знаю 🙂

Мой браузер сломался! Должно быть все HTML5 ха-ха!

Вот довольно удивительная библиотека симуляции физики для JavaScript… Демонстрация: http://dl.dropbox.com/u/2494815/demo/Joints.html Код: https://github.com/josephg/chipmunk-js

@hAWK Мне нравится эта страница. Благодарю.

@chrissergent np

@sitePoint_Paul Я полагаю, что вы использовали ту базовую линейную алгебру, которую вы упомянули, для создания своей игры … включает ли это физику (скажем, не нарушать стену?

@chrissergent — игры в стиле настольной игры — один из самых простых типов игр для создания, например, Axis & Allies.

molona: да, вы имеете в виду Collision Detection, что удивительно сложно.

http://yellowshoe.com.au/super_fun/ — пример игры в стиле настольной игры с несколькими вариантами ответов / кубиками, определяющими вход.

@sitePoint_Paul. Да, я думаю, что это термин 🙂

Я верю, что это похоже на то, что используют эти игры

@ markbrown4 Я просто не сделал этого и подумал, что это будет весело; но с чего начать; Я хотел бы, чтобы было прохождение для чего-то простого.

Начните с того, что вы знаете. Если вы чувствуете себя комфортно с HTML и CSS, создайте экраны с использованием этих технологий.

Большая часть этой игры super_fun — это просто HTML / CSS с javascript, изменяющим состояние и страницы.

Эхи, ребята, что, по вашему мнению, является наиболее полным html5-фреймворком для игрового дизайна … Я смотрю на lime.js, что вы об этом думаете?

@molona: Вы можете увидеть много кода пересечения линии здесь: https://github.com/pda/bottom_up/blob/master/src/code/line.coffee

@ markbrown4 Я бы не отказался от прохождения Супер игры. Это может заставить меня начать логику пошаговой военной игры.

Из того, что я видел, Impact.js является наиболее полным, но он имеет свою цену.

@molona: а также обнаружение столкновений здесь: https://github.com/pda/bottom_up/blob/master/src/code/box_collider.coffee

@fhuel lime.js выглядит хорошо, но я еще не использовал его.

@fhuel большинство игровых движков, которые вы можете сказать, хороши по выводимым играм.

что вы думаете о appmobi?

правильно, спасибо @ markbrown4

Примеры игр lime.js выглядят гладко и быстро, и кажется, что они набирают популярность. Похоже, хороший вариант.

@sitePoint_Paul Ваша игра, размещенная на amazonaws.com, есть ли особая причина для выбора amazonaws?

@sitePoint_Paul спасибо !!!

@diogo: потому что хостинг на AWS дешевый и простой, и я использую его для других домашних и рабочих проектов.

@diogo: большая часть или вся SitePoint размещена на Amazon AWS, так или иначе.

то, что я использую, это просто простое ведро Amazon S3.

AWS только для статического сайта, не так ли?

@ chrissergent Я могу отправить тебе пошаговое руководство по этой игре. Скинь мне свою электронную почту на [email protected]

@fhuel S3 только для статического контента, но AWS состоит из множества сервисов, включая EC2, который является их виртуальной вычислительной платформой.

Для анимации в HTML5 requestAnimationFrame является важным API, однако он еще не является стандартным. Вот хороший скрипт polyfill, который предоставляет его для всех браузеров: http://teven-b82df421.s3-website-us-east-1.amazonaws.com/js/vendor/raf.js

хорошо, вероятно, это кажется намного более сложным, чем «обычный» хостинг… по крайней мере, мне 🙂

имеет ли смысл запутывать ваш код js?

Более официальный URL-адрес для запроса на заполнение анимационного кадра: https://gist.github.com/1579671

@diogo, который не помешает кому-то действительно взяться за код.

@ markbrown4 Я отправил это.

@fhuel Это, вероятно, сложнее, пока вы не поработаете с ним некоторое время 🙂

эхехех верно

Хорошо, у нас осталось чуть более 5 минут, так что если у вас есть какие-либо вопросы, на которых вы сидели, сейчас самое время их задать.

Привет, любое предложение для структуры для создания карточной игры для сбора, я планирую написать свой собственный, используя jquery в качестве клиента и node.js / redis в качестве back-end

Если вы в юнит-тестировании — это может быть сделано и для разработки игр. Вот тесты для моей незавершенной работы: http://teven-b82df421.s3-website-us-east-1.amazonaws.com/test.html и код: https://github.com/pda/ bottom_up / дерево / мастер / SRC / код / спецификации

@diogo Я бы по-прежнему использовал uglify.js для сжатия и минимизации скриптов, но только для скриптов, а не для их защиты.

@ markbrown4 отличный ответ 🙂

@ badjem79 это зависит от UX, я полагаю.

@ badjem79 нет немедленных рекомендаций, только чтобы было как можно проще. если HTML / CSS может достичь того, чего вы хотите, нет причин помещать все в <canvas>.

@sitePoint_Paul Не могли бы вы поделиться ссылками / ссылками на модульное тестирование?

@diogo: для JavaScript Jasmine отлично подходит для модульного тестирования: http://pivotal.github.com/jasmine/

Для Ruby-кода отлично подходит RSpec: http://pragprog.com/book/achbd/the-rspec-book

Node.js помогает, если у вас много трафика или вы хотите поддерживать socket.io, например, общение.

спасибо, я собирался пройти модульное тестирование для javascript 🙂

Игра для сбора карточек может использовать socket.io, чтобы делиться с другими, например, онлайн.

Несколько месяцев назад Mozilla опубликовала этот минимальный шаблон HTML5-игры: https://blog.mozilla.org/labs/2012/05/introduction-a-minimalist-html5-game-template/

Стоит прочитать, если вы хотите, чтобы коллекция инструментов, чтобы начать.

И это конец официальной сессии всех. Не стесняйтесь бродить и общаться сколько угодно, но я собираюсь освободить наших экспертов. Большое спасибо Полу и Марку за то, что они нашли время этим утром, и всем остальным за то, что пришли и приняли участие. Я опубликую стенограмму и список ресурсов в SitePoint позже сегодня.

Если вы хотите подписаться на напоминания по электронной почте о будущих сессиях, вы можете сделать это здесь https://www.facebook.com/sitepoint/app_115462065200508

@sitePoint_Paul и @ markbrown4

Благодарность

Благодарность

Спасибо

Следующая сессия — 12 сентября, тема — UX с автором SitePoint Джоди Мул.

Дох пропустил это, лол

Спасибо!

Спасибо

@theoWirebox Проверьте стенограмму позже сегодня 🙂

Без проблем.

ок круто спасибо

Не беспокойтесь — рад, что вы все сделали это.

Кроме того, если вы помните Command & Conquer из 90-х, проверьте это: http://www.adityaravishankar.com/projects/games/command-and-conquer/

Если у вас есть вопросы, пишите мне на @ markbrown4. Хотели бы увидеть, что вы, ребята, делаете 🙂

Аналогично — я @pda в Твиттере: http://twitter.com/pda