Главная страница

Графика на JavaScript. Рафаэлло ЧеккоГрафика на ауа5спр1Москва Санкт-Петербург Нижний Новгород


Скачать 8.13 Mb.
НазваниеРафаэлло ЧеккоГрафика на ауа5спр1Москва Санкт-Петербург Нижний Новгород
АнкорГрафика на JavaScript.pdf
Дата31.03.2017
Размер8.13 Mb.
Формат файлаpdf
Имя файлаGrafika_na_JavaScript.pdf
оригинальный pdf просмотр
ТипДокументы
#29243
страница1 из 15

С этим файлом связано 87 файл(ов). Среди них: ПРЕИМУЩЕСТВА ПАМПИНГА.docx, Пампинг - когда нужен, а когда нет.docx и ещё 77 файл(а).
Показать все связанные файлы
  1   2   3   4   5   6   7   8   9   ...   15

HTML5 Canvas, jQuer)} и не только
Рафаэлло Чекко
O С П П ТЕР
Рафаэлло Чекко
Графика на]ауа5спр1
Москва ■
Санкт-Петербург ■
Нижний Новгород ■
Воронеж
Ростов-на-Дону ■
Екатеринбург ■
Самара ■
Новосибирск Киев ■
Харьков ■
Минск

ББК 32.988.02-018
УДК 004.92
Ч-37
Рафаэлло Чекко
Ч-37 Графика на JavaScript. — СПб.: Питер, 2013. — 272 сил В этой книге рассказывается, как, работая си элементом Canvas (холст, появившимся в HTML5, создавать насыщенные веб-приложения для П К и мобильных устройств. С появлением HTM L5 и усовершенствованной браузерной поддержки язык стал исключительно удобным для создания высокопроизводительной веб-графики.
Опытн^
1
й веб-разработчик, прочитав данное издание, на практических примерах изучит интересн^:е и полезные подходы к созданию аркадны х игр, эффектов D H T M L и т. д. Сложные темы представлены в книге в виде легких для усвоения фрагментов.
ББК 32.988.02-018
УДК Права на издание получены по соглашению с O'Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы тони было форме без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея ввиду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги 978-1449393632 англ.
© 2013, Piter Inter Ltd.
Authorized Russian translation of the English edition of titled Supercharged
JavaScript Graphics, 1st Edition (ISBN 9781449393632) © 2011 Raffaele Cecco.
This translation is published and sold by permission of O'Reilly Media, Inc., which owns or controls all rights to publish and sell the same
ISBN 978-5-4461-0034-7 © Перевод на русский язык ООО Издательство Питер, 2013
© Издание на русском языке, оформление ООО Издательство Питер, 2013
Краткое содержание
П ред и слови е ......................................................................................... От издательства. Глава 1
. Многократное использование кода и его оптимизация. Глава 2. Принципы работы с D H T M L ........................................................... Глава 3
. Прокрутка....................................................................................66
Глава 4 . Продвинутый пользовательский интерфейс.....................................91
Глава 5 . Введение в программирование игр на JavaScript.......................... Глава 6 . Холст H T M L 5 Глава 7 . Использование векторов в играх и компьютерных моделях. Глава 8 . Визуализации с применением G Глава 9 . Работа с небольшим экраном использование jQuery M o b ile ......... Глава 10. Создание приложений для Android с применением PhoneGap . . . . 259

Оглавление
Предисловие
..................................................................................... Целевая аудитория и некоторые допущ ения........................................11
Организация книги Условные сокращения, используемые в данной книге. Работа с примерами кода. 14
Браузеры, на работу с которыми рассчитана книга. Благодарности. От издательства. Глава 1. Многократное использование кода и его оптимизация Чтобы все работало быстро. Что и когда оптимизировать. Ремесло профилирования кода ........................................................... Оптимизация JavaScript...................................................................... Таблицы поиска. Побитовые операторы, целые числа и двоичные числа. Оптимизация с помощью jQuery и взаимодействие с объектной моделью документа. Оптимизация изменений таблиц стилей C S S .............................. Оптимизация вставок в DOM-дерево..........................................40
Дополнительные источники. Глава 2. Принципы работы с D H T M L ............................................... Создание спрайтов. Анимация при работе с изображениями. Инкапсуляция и абстракция рисования
(скрывание содержимого. Сведение к минимуму вставок и удалений в дереве. Код спрайта............................................................................45
Простое приложение со спрайтом. Более динамическое приложение со спрайтами. Преобразование в плагин jQ Таймеры, скорость и кадровая частота. 57
Работа си. Точность таймера. Достижение устойчивой скорости. 60
Кэширование фоновых изображений в Internet Explorer Глава 3. Прокрутка Эффекты прокрутки только с применением CSS...................................... Прокрутка с применением JavaScript..................................................... Фоновая прокрутка изображений. Плиточная прокрутка изображений..............................................73
Глава 4 . Продвинутый пользовательский интерфейс Формы H TM L5................................................................................... Использование библиотек JavaScript для работы с пользовательским интерфейсом. Применение библиотеки jQuery UI для создания улучшенных веб-интерфейсов.................................................................. Применение библиотеки Ext JS для программирования пользовательских интерфейсов, рассчитанных на интенсивные нагрузки. Создание элементов пользовательского интерфейса с нуля
(создание трехмерной карусели. Описание карусели. Загрузка изображений карусели. Объекты элементов, образующих карусель. 106
Объект-карусель.................................................................... Роль плагина jQuery.............................................................. Макет страницы с каруселью. Глава 5. Введение в программирование игр на
JavaScript
......... Обзор игровых объектов. Игровой код. Переменные, действующие во всей игре. Считывание клавиш. Перемещаем все подряд.........................................................120
Простой аним атор................................................................ Обнаружение соударений.......................................................122
Монстры............................................................................... Игрок. Щиты. Летающая тарелка. Игра. Все вместе
Глава 6. Холст. Поддержка Растровая графика, векторная графика или и то и другое. Ограничения, связанные с холстом ................................................... Сравнение холста и масштабируемой векторной графики (Сравнение холста и Adobe Инструменты для экспорта холста ..................................................... Основы рисования на холсте. Элемент Canvas.................................................................... Рисовальный контекст...........................................................154
Отрисовка прямоугольников. 155
Отрисовка путей с применением линий и кривых. 155
Отрисовка растровых изображений. Цвета, обводки и заливка.......................................................164
Анимация при работе с холстом.........................................................169
Холст и рекурсивное рисование.........................................................172
Макет страницы с деревом, нарисованным на холсте. Замена спрайтов DHTML на спрайты холста........................................175
Новый объект CanvasSprite..................................................... Другие изменения в коде ....................................................... Графическое приложение для чата с применением холста и WebSockets............................................................................. Преимущества WebSockets..................................................... Поддержка WebSockets и безопасность....................................179
Приложение для обмена мгновенными сообщениями. Глава 7. Использование векторов в играх и компьютерных моделях. Операции с векторами. Сложение и вычитание...........................................................195
Масштабирование.................................................................. Нормализация ...................................................................... Вращение. Скалярное произведение ....................................................... Создание векторного объекта JavaScript............................................. Моделирование пушечной стрельбы с применением векторов ............. Переменные, общие для всего процесса моделирования.............200
Ядро..................................................................................... Пушка. Фон. Основной цикл. 204
Макет страницы. Моделирование ракеты. Объект игры..........................................................................207
Объект-преграда.................................................................. 208
Объект-ракета...................................................................... Фон. Обнаружение соударений и реагирование на них Код страницы. Возможные улучшения и модификации. Глава 8
. Визуализации спр имен е ни ем. Ограничения. Словарь терминов............................................................................221
Графические диаграммы. Форматы данных и разрешение диаграмм. Использование динамических данных......................................228
Резюме................................................................................. Интерактивные диаграммы. События в интерактивных диаграммах. Получение информации о событиях........................................238
Глава 9
. Работа сне большим экраном использование веб-приложение для мобильных устройств. Описание игры TilePic............................................................ Код игры T ile P ic .................................................................... Глава 10
. Создание приложений для A n d roid спр имен е ни ем. Установка PhoneGap........................................................................ Установка Java JDK................................................................ Установка Android S D K Установка Eclipse.................................................................. Установка инструментов для разработки в Android .................... Установка PhoneGap.............................................................. Создание проекта PhoneGap в Eclipse................................................. Изменение файла App.java..................................................... Изменение файла Создание и тестирование простого веб-приложения .................. Тестирование приложения TilePic........................................... 269

Предисловие
Я посвятил много лет разработке видеоигр, работал с высокопроизводительными языками программирования и разнообразным оборудованием. Поэтому сначала я снисходительно относился к возможностям программирования графики на языке JavaScript. На практике же оказалось, что JavaScript — отличный и эффективный язык, который постоянно используется в передовых браузерах, применяется для повышения производительности и внедрения удивительных новых возможностей. В сочетании с такими феноменами, как Canvas (холст, JavaScript предлагает разработчику инструментарий, ничуть не уступающий по возможностям Adobe Flash, а такие компоненты, как WebGL, открывают самые радужные перспективы, связанные с программированием графики на JavaScript непосредственно в браузере.
Это издание рассчитано на читателей, имеющих хорошие навыки практической работы си желающих поэкспериментировать с графическим программированием, которое не ограничивается эффектами при наведении указателя мыши и выходит за пределы обычных анимационных возможностей, предоставляемых в библиотеках (например, в jQuery). На страницах книги будут рассмотрены темы, связанные с графикой, в частности:
О многократное использование и оптимизация кода, в том числе техники наследования и возможности повышения производительности;
О применение сильных сторон удивительного графического потенциала, присущего обычным манипуляциям с объектной моделью документа (D O M О использование элемента Canvas для дополнительной оптимизации графики;
О создание видеоигр;
О применение математики при программировании креативной графики и анимации О креативное представление ваших данных с помощью визуализационных A P I
Google и диаграмм Google (Google О эффективное использование jQuery и разработка графически ориентированных плагинов (подключаемых модулей) с применением О применение PhoneGap для преобразования веб-приложения в нативное приложение Эта книга является введением в различные графические технологии и, возможно, пробудит в вас тягу к более подробному исследованию затронутых здесь тем. Экспериментируйте и наслаждайтесь
Целевая аудитория и некоторые допущения
Читатель этой книги должен хорошо разбираться в теме и обладать достаточным практическим опытом создания сайтов и веб-приложений — в частности, таких, которые используют Мне нравится библиотека jQuery, поскольку она значительно ускоряет разработку. Во многих образцах кода, приведенных в этой книге, использование jQuery предполагается по умолчанию. Вообще, все внешние библиотеки и ассоциированные сними файлы, упоминаемые в издании, взяты из надежных сетей распространения контента, например из Google. Благодаря отказоустойчивости таких сетей нет необходимости копировать рассматриваемые файлы в собственное веб-про­
странство.
Математика в книге сведена к минимуму, хотя в некоторых примерах применяются базовые векторные и тригонометрические концепции.
Организация книги
Информация излагается в довольно быстром темпе, первые примеры кода, связанные с программированием графики, приводятся уже в главе В следующих главах рассмотрены связанные с графикой темы. Особое внимание уделено темам, которые позволяют сделать веб-приложения значительно насыщеннее в визуальном отношении, а также сточки зрения интерактивности.
Хорошая книга об интерактивной графике была бы неполной, если бы в ней небыли затронуты вопросы, связанные с видеоиграми. Мы подробно исследуем эту тему, изучив создание полнофункциональной видеоигры. Кроме того, я опишу функции, полезные в игровых проектах, например использование спрайтов и про­
крутки.
Темы, рассматриваемые в каждой из глав, можно резюмировать следующим образом.
О Глава 1. Многократное использование кода и его оптимизация. В главе рассмотрены приемы объектно-ориентированного программирования на языке
JavaScript, а также возможности оптимизации кода (в том числе с применением jQuery). Подобные способы оптимизации приобретают особое значение в таких графических приложениях, где критически важно добиться высокой производительности. Здесь мы также поговорим о малоиспользуемых двоичных операторах JavaScript, а также об их применении в целях оптимизации.
О Глава 2. Принципы работы с DHTML. В этой главе показано, как обычные операции с объектной моделью документа (то есть D H T M L ) могут применяться для создания быстродвижущейся графики. Мы разработаем систему спрайтов (полезную при написании игр и создании других эффектов) и посмотрим, как она работает в контексте плагина О Глава 3. Прокрутка. Здесь рассматриваются базовые приемы прокрутки с применением каскадных таблиц стилей (CSS), в том числе параллакс-эффекты. Кроме того, обсуждается прокрутка под управлением JavaScript и быстрая
система параллаксовой прокрутки, в основе которой лежит использование плитки. Я расскажу вам о мощном редакторе карт Tiled и о том, как создавать карты с плиточной организацией.
О Глава 4. Продвинутый пользовательский интерфейс. В этой главе рассмотрены библиотеки jQuery UI и Ext JS, предназначенные для работы с пользовательским интерфейсом. Мы исследуем несхожие подходы, применяемые в двух этих библиотеках, и, соответственно, их применимость для написания приложений того или иного типа. Мы будем пользоваться не только имеющимися библиотеками пользовательского интерфейса, но и с нуля напишем так называемую трехмерную карусель.
О Глава 5. Введение в программирование игр на JavaScript. Здесь рассказано, как создавать интересные игры, не прибегая к использованию внешних плаги­
нов, в частности Flash. В главе рассматриваются и такие темы, как обнаружение соударений и работа с объектами. Кроме того, мы разработаем полномасштабную винтажную игру-аркаду, чтобы продемонстрировать в действии рассмотренные здесь приемы.
О Глава 6. Холст HTML5. Здесь мы подробно исследуем элемент Canvas (холст) и рассмотрим несколько примеров. В частности, будет рассказано, как написать графическое приложение для обмена мгновенными сообщениями, применив для этого холст и WebSockets. В том числе мы изучим такие темы, как основы рисования, штрихи, заливка, градиенты, рекурсивное рисование, растровая графика и анимация.
О Глава 7. Использование векторов в играх и компьютерных моделях. Здесь будут рассмотрены многочисленные примеры использования векторов в графических приложениях и играх. Вы убедитесь, что совсем немного математики может принести массу пользы. В примерах кода вы найдете модели, имитирующие выстрел из пушки и запуск ракеты, движения получаются очень реалис­
тичными.
О Глава 8. Визуализации с применением Google. В этой главе мы исследуем различные графические инструменты Google — обширный набор ресурсов для визуального представления информации, позволяющих показать большинство разновидностей данных максимально содержательным образом. Мы поговорим о широком спектре инструментов, от гистограмм до датчиков Google-O-Meter, рассмотрим реализацию в вашем приложении как статических, таки интерактивных схема также другие способы визуализации. Здесь мы обсудим важнейший вопрос правильного форматирования данных — так, чтобы их можно было использовать при работе с инструментами графической визуализации.
О Глава 9. Работа с небольшим экраном использование jQuery Mobile. В данной главе описывается jQuery M obile — фреймворк, построенный на основе библиотеки jQuery и предоставляющий унифицированный пользовательский интерфейс для мобильных приложений, ориентированных на работу с мобильными устройствами. jQuery M obile преобразует обычные H T M L -страницы в интерактивные анимированные мобильные файлы. В этой главе будет рассказано, как написать графическую игру со скользящей мозаикой, специально
настроенную под работу с пользовательским интерфейсом jQuery и мобильными устройствами.
О Глава 10. Создание приложений для Android с применением PhoneGap. Хотите научиться создавать нативные мобильные приложения, располагая уже имеющимися навыками веб-разработки? Тогда вам пригодится PhoneGap. В этой главе рассказано, как установить и сконфигурировать PhoneGap для создания нативных приложений Android. Закончив установку и конфигурацию, мы превратим игру со скользящей мозаикой, которую разработали в главе 9, в нативное приложение, готовое к развертыванию на мобильном устройстве.
  1   2   3   4   5   6   7   8   9   ...   15

перейти в каталог файлов