Как начать создавать такую ​​игру, как Angry Birds на Chrome - PullRequest
7 голосов
/ 11 мая 2011

http://chrome.angrybirds.com/

Говорят, что браузерное приложение выполнено с использованием Canvas 2D или Web GL.

Я пытался просмотреть источник с помощью Chrome с помощью кнопки «Проверить элемент», номой хром зависает каждый раз.

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

Ответы [ 5 ]

11 голосов
/ 11 мая 2011

Если вам нужна книга, Foundation HTML5 Canvas: для игр и развлечений только что вышел.Он довольно простой, но будет полезен для вас, если вы совершенно новичок в JavaScript и Canvas.

Более быстрым введением будет учебник по Mozilla Canvas , который очень понятен.

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

Для общего сведения.Книга о Javascript (независимо от вашего предыдущего опыта), вероятно, стоит прочитать Javascript: The Good Parts

Что касается общего совета, я даю вам слова Иры Гласс:

Никто не говорит это людям, которые являются новичками, я бы хотел, чтобы кто-то сказал мне.Все мы, кто занимается творчеством, занимаемся этим, потому что у нас хороший вкус.Но есть этот пробел.Первые пару лет ты делаешь вещи, но это не так хорошо.Он пытается быть хорошим, у него есть потенциал, но это не так.Но твой вкус, то, что привело тебя в игру, все еще убийственно.И ваш вкус - вот почему ваша работа разочаровывает вас.Многие люди никогда не проходят этот этап, они уходят.Многие люди, которых я знаю, которые занимаются интересной творческой работой, прошли через это годы.Мы знаем, что в нашей работе нет той особенной вещи, которой мы хотим, чтобы она была.Мы все переживаем это.И если вы только начинаете или все еще находитесь на этом этапе, вы должны знать, что это нормально, и самое важное, что вы можете сделать, - это проделать большую работу.Поставьте себя на крайний срок, чтобы каждую неделю вы заканчивали одну историю.Только пройдя объем работы, вы сможете преодолеть этот пробел, и ваша работа будет так же хороша, как и ваши амбиции.И мне потребовалось больше времени, чтобы понять, как это сделать, чем всем, кого я когда-либо встречал.Это займет некоторое время.Это нормально, чтобы подождать некоторое время.Вы просто должны пробиться.

3 голосов
/ 11 мая 2011

Когда вы «просматриваете источник» (в отличие от использования «Проверять элемент»), первый метатег говорит:

name="gwt:property" content="html.renderer=webgl"

Так что я бы пришел к выводу, что WebGL действительно используется.(На самом деле WebGL использует элемент canvas, поэтому технически ответ «Canvas и Web GL», а не «Canvas или Web GL». Но я полагаю, что это не такиспользуйте 2D API javascript canvas.)

Когда я использую Ctrl + Shift + I и нажимаю «Элементы», дерево DOM показывает, что у <div> с идентификатором «forplay-root» есть потомок <canvas> элемент.Но я не знаю, как проверить, используется ли он для WebGL или более традиционных 2D-вызовов Canvas.

Очень хороший сайт для изучения WebGL - Learning WebGL .В частности, взгляните на The Lessons .

Я не знаю, почему на странице происходит сбой вашей страницы Chrome.Вы используете совершенно новую версию Chrome?Релизная версия не поддерживала WebGL до недавнего времени.(Но это не объясняет сбой ... вы просто не увидите действие.) Возможно, вам придется отправить отчет об ошибке в Chrome.

2 голосов
/ 18 мая 2011

Порт Angry Birds был создан с использованием библиотеки GWT ForPlay http://code.google.com/p/forplay/

Причудливо то, что вы можете написать свою игру на Java и скомпилировать ее для Android, WebGL и Flash из одного источника. Что довольно круто. Посмотрите презентацию Google I / O 2011 на ForPlay для более подробной информации http://www.youtube.com/watch?v=F_sbusEUz5w

1 голос
/ 12 мая 2011

Для такой игры я бы начал искать способ иметь ту же физику, поэтому Box2D - лучшая отправная точка.http://box2d.org/ Существуют различные порты JavaScript для просмотра.

0 голосов
/ 24 марта 2014

Порт может быть создан с использованием популярной кроссплатформенной библиотеки libgdx. Он написан на Java, но позволяет отлаживать и играть в игру на рабочем столе. Вы в основном пишете код один раз в основном проекте, и он связывается с четырьмя другими проектами - dektop, Html5, android и iOS. Версия Html5 выполняется с помощью gwt, а версия для iOS - с robovm. Вы можете посмотреть его здесь: libgdx.badlogicgames.com .

...