Создаем простейший HTML5 3D движок на JS и HTML5 Canvas API



Вероятно, что если бы вы создавали полномасштабный 3D-движок, в комплекте с трехмерной матрицой преобразования, точечных объектов, плоских объектов, тенями и других пространственных вычислений — это было бы довольно трудно.

Но что, если мы хотим создать оптимизированный 3D JavaScript движок, который поддерживает переходы и повороты? Неужели это так трудно?

Так вот, чтобы создать такой движок нам понадобиться всего лишь 40 строчек кода! В этой небольшой статье я вам расскажу о создании примитивном 3d javascript движка, который вы сможете использовать в анимации, игра и пр.

Читать дальше →

Impact HTML5 Game Engine - первый HTML5 движек



На этом движке реализована игра «Biolab Disaster», я уже об этом писал. Это чистый js и canvas. Сыграть можно здесь.

ImpactJS это:
  • визуальный редактор уровней, основанный на тайлсетах (Видео)
  • набор классов для работы со звуком, анимацией, коллизией и т.п.
  • физика «из коробки»
  • entity и триггеры
  • удобный упаковщик вашей игры «в коробку» (minifier)

Docs

Интересен и встроенный редактор уровней. Автор подметил что у него есть особая схожесть с редакторами уровней для Quake — Quark и Half-life engine игр — Valve Hammer Editor, так что у тех кто работал в этих редакторах, у вас не будет проблем с этим редактором. Все те же энтити и ивенты.



Пока сам движек еще не зарелизен и дата выхода не объявлена но можно подписаться на емейл уведомление о выходе. Уже в строю форум поддержки.

Релиз таки состоялся

Первый видео и аудио плеер на HTML5 в рунете



Срочно понадобилось для сайта плеер для проигрывания аудио без использования flash. Я помнил еще далекие времена когда искал флеш-плеер и нашел его у ребят Uppod — их плеер понравился и с тех пор я не искал альтернатив. Как же я удивился, обнаружив их html5 player. Делаю ставку на Uppod, жаль поддержку плейлиста они еще не реализовали:

http://html5player.ru/

Официальный логотип HTML5

Порою я задумывался, какой же логотип использовать применительно к html5. Просмотрев сайты, посвященные html5, понял что каждый рисует логотип во что горазд, нет стандартизированного. Наконец-то HTML5 получил официальный логотип! Любуйтесь:



Так же доступ в виде виджета с иконками поддерживаемых html5 технологий:




Логотип распространяется по лицензии CC 3.0. Скачать\глянуть здесь

Изучаем Canvas. Урок №2 - Рисуем линии и кривые

Линия задается двумя точками на плоскости, для того чтобы в нашем теге canvas нарисовать линию нам понадобятся:

moveTo(x,y);
lineTo(x,y);
stroke();

moveTo(x,y) — это метод, который определяет начальное положение курсора, исходное положение
lineTo(x,y) — создает связь между исходным положением и заданным, прокладывает вектор
stroke() — рисует по заданному пути линией. По умолчанию — черной, толщиной в 1 пиксель.

<html>
<head>
<script>
 
function drawLine() {
	var canvas=document.getElementById("myCanvas");
	var line=canvas.getContext("2d");
 
	line.moveTo(100,100);
	line.lineTo(200,200);
	line.stroke();	
}
 
</script>
</head>
<body onload="drawLine()">
	<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Рассмотрим свойства, которыми мы можем наделить нашу прямую:

Читать дальше →
  • нет
  • avatar
  • 0
  • 0

Векторные иконки на HTML5 + JS



На первый взгляд это обычные одноцветные иконки, но если призумить — их качество не ухудшиться. Очевидный профит таких иконок: с ними можно свободно экспериментировать и не переживать за высоту и ширину, компактный вид, а не куча файлов в папке icons, ну и наверное маленький размер, хотя с этим поспорить можно. Есть некоторые ограничители в цвете, возможен один цвет либо градиент (но думаю с конвертером нарисованного вектора в js код, возможно и больше цветов)

Смотреть иконки

Если вы хотите использовать эти иконки или создавать свои на подобной основе, кликайте по иконке — внизу появится код выбранной иконки, он вставляется в:

paper.path(<код иконки>).attr({fill: "#000", stroke: "none"});


Поддержку иконок на себя берет Rapha?l JS Lib

HTML5 порно скоро на i-экранах



Как-то странно звучит фраза html5 порно, но я не особо задумывался, ведь на i-девайсах нет нативной поддержки flash, поэтому разумно предложить, что пользователи оных девайсов никогда не видал порно на нем. По такому печальному случаю крупнейший портал YouPorn объявил о переходе на html5 в скором времени.