Создание HTML5-игр для самых маленьких(Phaser) Часть 2

Konstantin
Konstantin Ostrovsky
2019-02-07 07:54:23
100

Продолжая цикл статей по созданию игр для новичков, хочу заметить что за прошедший период Phaser 3 получил сильное развитие. В нем появилось множество новых типов объектов и функций, благодаря которым программировать с Phaser 3 стало еще легче, быстрее и удобнее. Прощу прощения если в момент прочтения данной статьи, принятые мною решения проектирования игры будут не самыми актуальными. Ссылка на часть 1

В прошлом уроке мы познакомились с HTML 5, Canvas, Flash и Phaser 3, а так же узнали о таких языках программирования как ActionScript, JavaScript и TypeScript. Настало время провести параллели о между этими языками и аргументировать почему мой выбор пал именно на TypeScript.

Java/Action/Type - все это Script

JavaScript, вероятно, является самым популярным и гибким языком программирования сейчас и еще долго будет им оставаться. Благодаря быстрому росту веба, JavaScript стал популярен и получил всеобщее признание. Но так было не всегда. Что бы лучше почувствовать "ветер перемен", давайте вернемся в 90-е и оценим качество веб-контента, а так же постараемся понять что послужило столь мощным толчком к развитию языка. Полагаю, перемещаясь во времени, мы обязательно увидим так же зарождение и погибель ActionScript и появление TypeScript.

Веб в 90-е

Язык HTML (т.е. HyperText Markup Language) появился в 1991 году. Его создал учёный-физик Тим Бернерс-Ли, работавший в ту пору, в ЦЕРН (том самом, который создал Большой Адронный Коллайдер). Тим также является автором первого браузера, который носил название World Wide Web, и он же придумал концепцию Всемирной паутины.

World Wide Web. Первый в мире браузер!

Возможности HTML в части графического оформления страниц были довольно скудными. Этому языку недоставало гибкости в настройках, и было совершенно очевидно, что для создания по-настоящему индивидуального оформления для страницы его совершенно недостаточно. А потому в 1996 году в дополнение к HTML появились каскадные таблицы стилей, CSS. Им тоже предстояло пройти некий эволюционный путь, но как бы там ни было, в конце 90-х у дизайнеров уже появился инструментарий для того, чтобы делать сайты красивее и удобнее. Правда, в ту пору это ещё мало кто умел.

По мере того, как HTML и CSS обрастали новыми возможностями, мужали и крепли, браузеры тоже эволюционировали. Самым распространенным в конце 90-х был браузер Internet Explorer (к 1999 году актуальной его версией была 5.01). Согласно статье в "Wikipedia" со ссылкой TheCounter.com, в 2000 году этим браузером пользовались более 79% пользователей.

Ну и, конечно, возможности для создания сайтов упирались в мощности серверов и скорости доступа к интернету. У большинства пользователей даже к концу декады 1990-х она была не больше 28 кбит за секунду, то есть, чуть меньше 4 килобайт. Конечно, в таких условиях не было никакого смысла создавать сайт с роскошной графикой, видеороликами или качественным звуковым сопровождением. Низкая скорость доступа к интернету накладывала достаточно серьёзные ограничения на веб-дизайнеров и заставляла их прибегать к самым разнообразным хитрым приёмам, чтобы сделать пребывание на сайте для посетителей максимально комфортным. Как правило, это сводилось к минимизации размеров страницы за счет сокращения количества используемой на сайте графики либо использовании низкокачественных изображений, которые имели бы меньший вес.

Игровой ПК начала 90-х

22 апреля 1993 года был выпущен первый веб-браузер для ОС Windows с графическим интерфейсом пользователя — Mosaic, исходный код которого лёг в основу Netscape Navigator и Internet Explorer. Решили вспомнить, как это было и показать несколько скриншотов браузеров эпохи становления Интернета.

Веб в то время был преимущественно текстовым. Если кто-то хотел добавить картинку, аудио или видео, то это делали в виде ссылок: нужно было перейти по ней, чтобы открыть в новом окне. Команда студентов из Национального центра суперкомпьютерных приложений Иллинойского университета решила, что это неудобно и выпустила первый браузер, который мог показывать мультимедиа прямо на html-странице.

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

И пользоваться браузером было на самом деле удобно! Все ссылки подсвечивались синим и подчёркивались, чтобы их было легко найти, а в панели сверху были кнопки для перехода назад и вперёд, реализуя виртуальные «хлебные крошки». Хочешь вернуться назад — просто нажми на кнопку. Потрясающе!

События, в результате которых появился JavaScript, разворачивались в течение шести месяцев, с мая по декабрь 1995 года. Компания Netscape Communications уверенно прокладывала себе путь в области веб-технологий. Её браузер Netscape Communicator успешно отвоевывал позиции у NCSA Mosaic, первого популярного веб-браузера. Netscape была создана людьми, принимавшими участие в разработке Mosaic в ранние 90-е. Теперь, с деньгами и независимостью, у них было всё необходимое для поиска способов дальнейшего развития веб-технологий. Именно это послужило толчком для рождения JavaScript.

Основатель Netscape Communications и бывший участник команды Mosaic Марк Андриссен считал, что веб должен стать более динамичным. Анимации, взаимодействие с пользователями и другие виды интерактивности должны стать неотъемлемой частью интернета будущего. Веб нуждался в лёгком скриптовом языке (или языке сценариев — прим.ред.), способном работать с DOM, который в те дни не был стандартизирован. Существовало одно «но», являвшееся на тот момент серьёзным вызовом: этот язык не должен был предназначаться для крупных разработчиков и прочих людей, имевших отношение к инженерной стороне вопроса. Java в те дни уже активно развивалась и твёрдо заняла эту нишу. Таким образом, новый скриптовый язык должен был предназначаться для совершенно иной аудитории — дизайнеров. Очевидно, что веб был статичным, а HTML был достаточно молод и прост в освоении даже для тех, кто не имел ничего общего с программированием. Следовательно, всё, что должно было стать частью браузера и сделать веб более динамичным, должно быть максимально понятным для далёких от программирования людей. Из этого предположения родилась идея Mocha, который должен был стать тем самым простым, динамичным и доступным скриптовым языком.

Прототип JavaScript был написан всего за десять дней в мае 1995 года Бренданом Эйхом. Первоначально он был завербован для внедрения среды выполнения Scheme для Netscape Navigator, но команда управления настояла на языке C-стиля, который будет дополнять недавно выпущенную Java.

JavaScript дебютировал в версии 2 Netscape Navigator в декабре 1995 года. В следующем году Microsoft провела реверс инжиниринг JavaScript для создания собственной версии, назвав его JScript. JScript поставляется с версией 3 браузера Internet Explorer и почти идентичен JavaScript — даже включая все те же ошибки и причуды — но у него были некоторые дополнительные возможности Internet Explorer.

Последующие версии JavaScript уже были основаны на стандарте ECMAScript. Проще говоря, ECMAScript — стандарт, а JavaScript — самая популярная реализация этого стандарта. Необходимость обеспечения того, чтобы JScript (и любые другие варианты) оставались совместимыми с JavaScript, мотивировала Netscape и Sun Microsystems к стандартизации языка. Они сделали это с помощью Европейской ассоциации производителей компьютеров, которая принимает стандарты. Стандартизованный язык назывался ECMAScript, чтобы не нарушать товарный знак Sun’s Java — шаг, вызвавший путаницу. В конечном итоге ECMAScript использовался для обозначения спецификации, и JavaScript был (и до сих пор) использован для обозначения самого языка.

 

Обратно в нулевые (2000)

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


Зачастую на сайтах использовалась gif-анимация (последовательное отображение рисунков), позже шеЬ-мастера внедряют на своих сайтах анимацию, изготовленную с использованием одной из технологий векторной графики. Но из-за большого разнообразия программных средств и разработчиков программных продуктов возникала проблема с отображением анимации на компьютере пользователя. Для отображения того или иного формата необходимо было устанавливать все новые и новые плагины. Если же они не были установлены, то посетители сайта не могли воспринять идею дизайнера, а в некоторых случаях получали просто раскиданную по экрану текстовую информацию вместо удобного сайта.

Выход был один — одна из компаний создателей векторной графики объединится с гигантом анимации и станет доминирующей на рынке векторной анимации. Такими компаниями стали FutureSplash Animator и Macromedia. Джонатан Гай, основатель компании FutureSplash Animator пытался сначала договориться с одним из гигантов — Adobe. Но сделка с этой компанией не состоялась. По-настоящему продуктом Джонатана заинтересовались после того, как FutureSplash Animator был использован такими компаниями, как Microsoft и Disney Online. В ноябре 1996 г. Джонатан Гай и его коллеги присоединились к компании Macromedia, и FutureSplash Animator превратился Macromedia Flash 1.0. На сегодняшний момент компания Adobe все-таки объединилась с Macromedia Flash. 

Технология flash основана на использовании векторной графики в формате Shockwave Flash (.swf) разработанная компанией Macromedia®. Это далеко не первый векторный формат, но именно его создателям удалось найти наиболее удачное сочетание между изобразительными возможностями графики, инструментальными средствами для работы с ней, а также механизмом включения результата в web-страницы. Основным преимуществом flash-технологии является его межплатформенность, т.е. этот формат может использоваться на любой аппаратно-программной платформе (в частности, как на компьютерах Macintosh, работающих под управлением операционной системы MacOS, так и на компьютерах IBM с ОС Windows).


К концу XX в. возможности web-анимации достигли уровня обычных видеороликов, и ограничивались лишь скоростными возможностями Интернета, что, по сути, и сдерживает графическое развитие flash-технологий. Но в Macromedia Flash внедрены такие возможности, о которых не могут и мечтать создатели видеофильмов — это диалог, участие пользователя в анимации. Первоначально это были банальные кнопочки, от нажатия которых происходили те или иные графические изменения. Но очень быстро Macromedia Flash превратилось в среду разработки профессиональных приложений: сайтов, справочников, игр, интернет-казино. Появление встроенного языка программирования ActionScript, позволило разработчикам создавать ggi-программы, полнофункциональные http-приложения.

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

У каждой медали — две стороны. И в случае с flash есть свои «ложки дегтя» — проблемы, ограничивающие возможности его использования.

Самая большая проблема технологии — для того, чтобы пользователь мог увидеть анимацию или воспользоваться интерактивностью, на его компьютере должна быть установлена специальная программа — Flash Player. Эта программа интегрируется в браузер и позволяет flash-элементам сайтов работать.

Без этой программы, вместо flash-элемента посетитель увидит пустоту. В большинстве случаев, когда элемент не несет функциональной нагрузки, эта проблема обходится установкой альтернативной картинки. Пользователь не увидит анимацию, но и не будет смущен пустым местом.

Решить эту проблему можно было 2-мя способами:

  • встроить flash в движок браузера;
  • изобрести новый более легковесный инструмент на базе JavaScript.

Критика и зависимость от Adobe подтолкнуло разработчиков создать нечто новое, бесплатное и более доступное для пользователя. Таким образом появился Canvas. 

В 2005 году изначально была предложена со стороны Apple для поддержки некоторых приложений внутри движка WebKit (на данный момент его используют браузеры Safari и Chrome). Рабочая группа W3C включила Canvas в Web Applications 1.0, который вошел в готовящийся стандарт HTML 5.0.

Сейчас встроенная поддержка Canvas реализована в том или ином виде во всех современных браузерах. В IE версии 8 и ниже она эмулируется при помощи отдельного VML-документа.

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

Хотелось бы сказать что на мой взгляд, ActionScript был лучшей реализацией чем JavaScript по нескольким причинам:

  • Возможность отладки кода в момент компиляции (не стоит забывать что AS - компилируется, а JS - интерпритируется);
  • Качественные, проработанные инструменты для разработчиков;
  • Строгая типизация;
  • Приватность (конечный файл sfw достаточно сложно раскодировать и получить исходники приложения).

Наше время (+/- 10 лет)

JavaScript - на пике популярности. Все, кто имеет отношение к вебу обязательно знают и работают с этим языком. Огромным толком к развитию языка послужило появление программной платформы NodeJS, которая позволяет работать на привычном многим языке так же на стороне сервера. Нет, он конечно же не вытеснил такие языки программирования как PHP, Ruby, GO, С# и прочие, но занял почетное место на нише популярных серверных языков.

И все бы хорошо, но...

JavaScript все еще не строго типизированный язык и не объектно-ориентированный, хотя с появлением спецификации ES6, ES7 стало ясно что все к этому и движется. Многие разработчики, желая делать более устойчивые и надежные веб-приложения, мечтали о добавлении строгой типизации и поддержки классов. 

Вдохновившись этим, MicroSoft в 2012 году представила TypeScript, позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.Разработчиком языка TypeScript является Андерс Хейлсберг (англ. Anders Hejlsberg), создавший ранее Turbo Pascal, Delphi и C#.

TypeScript является обратно совместимым с JavaScript и компилируется в последний. Фактически, после компиляции программу на TypeScript можно выполнять в любом современном браузере или использовать совместно с серверной платформой Node.js. Код экспериментального компилятора, транслирующего TypeScript в JavaScript, распространяется под лицензией Apache. Его разработка ведётся в публичном репозитории через сервис GitHub.

 

Важно понимать, что TypeScript - это просто красивая и удобная обертка над JavaScript, которая дает нам множество удобных инструментов для разработки приложений и игр.

Другие части статьи: