Урок 1. Введение в Babylon.js и TypeScript

Babylon.js фреймворк с открытым исходным кодом позволяющий создавать полноценные 3D-приложения и игры работающие в браузере без каких-то дополнительных плагинов, что звучит очень здорово. Сегодня мы окунемся в краткое введение этого фреймворка и языка TypeScript на котором и был написан Babylon.js. Babylon.js включает в себя все необходимые инструменты для разработки 3D-приложений. Он позволяет загружать и использовать 3D-объекты, управлять ими, создавать и управлять специальными эффектами, воспроизводить и управлять звуками, создавать геймплей и многое другое. Babylon.js прост в применении и мы это увидим на примерах.

Babylon.js создан с использованием языка TypeScript. TypeScript компилируемый и мультиплатформенный язык генерирующий чистый JavaScript код.

Сегодня мы рассмотрим следующие темы:

  • Введение в Babylon.js
  • Почему он был разработан с использованием TypeScript
  • Введение в TypeScript

Создатели

Babylon.js был создан  David Catuhe, Devid Rousset, Pierre Lagarde и Michel Rousseau. Это проект с открытым исходным кодом посмотреть на него можно на GitHab https://github.com/BabylonJS/Babylon.js, а так же у него есть свой собственный сайт http://www.babylonjs.com со множеством примеров и отличной документацией.

Инструменты вам в помощь для работы с Babylon.js

Babylon.js предоставляет насколько интерактивных инструментов в помощь разработчика и художникам:

  • Для разработчиков, площадка для экспериментов (http://www.babylonjs-playground.com). Она включает в себя редактор кода и холст для вывода результата. В нем также есть некоторые примеры кода, с которыми можно очень интересно побаловаться.
  • Для художников, Sandbox (http://www.babylonjs.com/sandbox/) позволяет перетаскивать в нее результат экспорта из 3D студий таких как Blender и 3ds Max, чтобы увидеть, как сцена будет выглядеть в браузере. Sandbox предоставляет вам средства отладки и дополнительные инструменты для оптимизации.
  • CYOS http://www.babylonjs.com/cyos/acpr/ позволяет разработчикам создавать свои собственные шейдеры в реальном времени. Также есть несколько шейдеров уже доступных в качестве примера для обучения и экспериментов.

Почему Babylon.js разработан с использованием TypeScript?

Babylon.js достаточно большой проект, с момента его появления на GitHab он активно развивается по сей день. В нем создано большое количество функций с большим количеством параметров для большей гибкости. Язык TypeScript помогает разрабатывать более надежные и простые в сопровождении приложения, за счет типизации и ООП.

TypeScript

TypeScript — это проект с открытым исходным кодом разработанный в Microsoft. Он компилируется в JavaScript и предоставляет статическую типизацию, которая не является обязательной. Система типизации позволяет  получить более чистый и понятный код. Это означает, что если функция имеет множество параметров с описанием типов, их проще понять и запомнить вместо тогда чтобы каждый раз обращаться к документации. Кроме того TypeScript позволяет объявлять классы (как это заведено в спецификации ECMAAcript 6) и интерфейсы для более понятной архитектуры и структуры кода.

Особенности TypeScript

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

Язык TS поддерживает наследование (классов), а также ограничения доступа (private / public / protected)  для членов класса, что очень хорошо для разделения публичного интерфейса и внутреннего.

Введение в TypeScript

Давайте рассмотрим основные моменты, такие как компиляция ts в js, работу с классами, типами, функциями, наследованием и интерфейсами.

Компиляция с помощью Gulp

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

Для начало надо установить Node.js (https://nodejs.org) если у вас его еще нет, вместе с ним мы получим среду выполнения нашего скрипта gulp + доступ к NPM пакетам.

1. Используя командную строку установим gulp

2. Так же используя командную строку установим модуль для компиляции ts

3. Создадим файл gulpfile.js со следующим кодом

4. Чтобы запустить достаточно набрать в командной строке gulp

Типизированные переменные

В ts есть следующие типы:

  • String
  • Number
  • Boolean
  • Any
  • Void
  • Enum
  • Array

На js мы можно написать так:

И на ts мы тоже так можем написать, компилятор ts постарается угадать тип при инициализации. Но лучше это делать явно! Для этого ts предлагает следующий синтаксис:

То есть предыдущий пример можно написать так:

В ts после объявления переменной уже нельзя будет присвоить значение другого типа, даже если тип не указан явно:

Для того чтобы получить гибкость переменных js с возможность менять тип переменной на ходу в ts есть специальный тип any. Если переменная объявлена с типом any она может принимать значение любого типа:

В умных IDE например в WebStorm объявление переменных с типом помогает найти ошибки еще до компиляции:

d87621e1fad1406c8939af55ea2822b7

Разговаривать про типы String, Number, Boolean смысла нет, так как они ни чем не отличаются в работе в js.

Перечисления

Синтаксис объявление перечисления выглядит так:

Этот код на ts порождает следующий код на js:

А объявление переменной с использованием перечисления выглядит так:

Массивы

Объявление массивов в ts и js похожи, вот пример:

В ts мы можем объявить тип элементов массива, например:

в ts объявление массива без указания типа эквивалентно new Array<any>();

Классы и интерфейсы

Классы и интерфейсы позволяют создавать типы, такой же как например класс Array. После объявления класса, можно создавать экземпляры с помощью ключевого слова new.

Синтаксис объявления класса в ts следующий:

Это порождает следующий код на js:

Теперь можно создать объект данного типа:

Можно также использовать модули, которые работают в качестве пространства имен:

Создание членов класса

По конвенции в js доступ к членам класса мы можем объявить так:

В TS мы можем явно указать спецификатор доступа (public, private и protected):

Наследование

Давайте рассмотрим наследование на примере, для это создадим новый класс:

Интерфейсы

Интерфейсы используются для создания контрактов. Это означает, что если класс реализует интерфейс, класс должен обеспечить реализацию всех функций и элементов определенных в интерфейсе. Если класс не реализует контракт полностью, произойдет ошибка компиляции.

Объявленные в интерфейсе члены являются публичными (public).

Итоги

Мы вкратце узнали что такое Babylon.js и TypeScript, разобрали особенности TypeScript и разобрались чем он нам может быть полезен и почему на нем и был написан Babylon.js. Следующим этапом мы наконец займемся знакомством с самим Babylon.js. До новых встреч!