WebGL + WebAudio = Tower Defense

Робимо Tower Defense на WebGL. На відміну від інших навчальних уроків, у даній статті на прикладі готового програми показано звідки і для чого брати ресурси.

Кінцева мета виглядає так:

image

Постановка завдання:
  • зробити швидко і красиво
  • по можливості використовувати готове

Чому WebGL? Щоб менше малювати — 3D багато речей робляться просто, а виглядають красиво.

Головна сторінка
На головній сторінці всього кілька DOM-елементів:

  • canvas на який виводиться ігрове поле
  • пара div ів меню
Наводимо красу
Для виведення 3D сцени будемо використовувати three.js т. к. це бібліотека з хорошою документацією, прикладами та безліччю готових модулів. Є перекладні матеріали, наприклад тут

Задній фон сцени

Це SkyBox, якщо використовувати термінологію three.js. Додаємо куб, гуглим під куб 6-сторонню структуру неба і завантажуємо її:

var urls = [
'./images/skybox_left.jpg', //-x
'./images/skybox_right.jpg', //+x
'./images/skybox_down.jpg', //+y
'./images/skybox_top.jpg', //-y
'./images/skybox_forward.jpg', //-z
'./images/skybox_back.jpg' //+z
];
var cubemap = THREE.ImageUtils.loadTextureCube(urls);
cubemap.format = THREE.RGBFormat;
var shader = THREE.ShaderLib['cube'];
shader.uniforms['tCube'].value = cubemap;
var SkyBoxMaterial = new THREE.ShaderMaterial({
fragmentShader : shader.fragmentShader,
vertexShader : shader.vertexShader,
uniforms : shader.uniforms,
depthWrite : false,
side : THREE.BackSide
});
var skybox = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), SkyBoxMaterial);
scene.add(skybox);

Ігрове поле

В якості поля використовуємо звичайний куб розтягнутий по осях X і Z. Для жвавості додамо на поверхню дзеркало звідси.

Інші об'єкти

Лазерний промінь і спалаху — отсюдашрифт — звідси.
Кульки бажано зробити блискучими (матеріал з властивістю shine приблизно 500-600), кристали будуть підсвічуватися лазером і можуть залишатися матовими.

Управління
Для обробки миші можна використовувати OrbitControls який входить стандартні бібліотеки three.js. Він підключається всього одним рядком

trackballControls = new THREE.OrbitControls(camera, renderer.domElement);

І не вимагає додаткової настройки.

Звук
Для фонового звуку можна вирізати шматок з будь-якого фришного міксу на Soundcloud і підключити в HTML-коді

<audio id="audiopl" autoplaynope="true" loop="true" >
<source src="./sounds/deejokeethedeepline_-_synth_x_pop_rip.mp3" type="audio/mpeg" >

Зі звуками пострілів і вибухів дещо складніше, їх доведеться відтворювати приблизно так

function playSound(buffer) {
var source = webAudioContext.createBufferSource();
source.buffer = buffer;
source.connect(webAudioContext.destination);
source.start(0);
}

Самі звуки можна легко підібрати на одному з wave-архівів, наприклад Freesound.

Зберігання станів
Для локального зберігання налаштувань та ін. можна використовувати window.localStorage.getItem(name) і window.localStorage.setItem(name, textvalue). У прикладі вони застосовуються для налаштування звуку.

Відео геймплея


Спробувати запустити в браузері
http://molgav.nn.ru/crystallit22old/
вихідний код можна подивитися там же.
На телефонах іграшка запускається, але вимагає додаткової оптимізації.

ЗИ. хто дійде до 20 рівня?
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.