WebInMyLife

Генератор социального виджета.

2013-12-14T09:36:00.001-08:00

Генератор социального виджета. Разрабатываю сейчас.

Простая игра на HTML5 Canvas – часть 4

2011-11-03T22:04:00.000-07:00

Часть 4а. РИСУЕМ ПЛАТФОРМЫ

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

var Platform = function(x, y, type){
//функция принимает позицию и тип платформы
var that=this;
that.firstColor = '#FF8C00';that.secondColor = '#EEEE00';that.onCollide = function(){player.fallStop();};//если тип платформы отличен от 1, то просто устанавливаем нужный цвет и вызываем функцию
//fallStop() определенную в прошлой части урока
if (type === 1) {//, но если тип равен '1', устанавливаем другие цвета и ускорение взлета jumpSpeed равным 50.
//после этого метод checkJump()примет '50' вместо '17' предусмотренных по умолчанию.
that.firstColor = '#AADD00';that.secondColor = '#698B22';that.onCollide = function(){
player.fallStop();player.jumpSpeed = 50;};}
that.x = ~~x;that.y = y;that.type = type;
return that;
};

Теперь необходимо создать функцию, которая будет генерировать все платформы и складывать их в platforms[] массив, который мы определим в ближайшее время. После этого нарисуем платформы на экране.

var nrOfPlatforms = 7,
platforms = [],platformWidth = 70,platformHeight = 20;//глобальные (пока) переменные не очень подходят для хранения размеров платформ, но
//в нашем случае они необходимы для вычисления столкновений, поэтому размещены здесь
//а не в свойствах класса платформ
var generatePlatforms = function(){var position = 0, type;//'position' это Y координата платформы на экране и вначале она равно нулю
for (var i = 0; i < nrOfPlatforms; i++) {type = ~~(Math.random()*5);
if (type == 0) type = 1;else type = 0;//Обычных платформ будет примерно в пять раз больше, чем батутов
platforms[i] = new Platform(Math.random()*(width-platformWidth),position,type);//случайно выбранная позиция по Xif (position < height - platformHeight)
position += ~~(height / nrOfPlatforms);}//и Y интервал
}();
//эта функция будет вызвана только один раз, перед стартом игры

Добавляем метод Draw () объекту платформы:

var Platform = function(x, y, type){(...)that.draw = function(){ctx.fillStyle = 'rgba(255, 255, 255, 1)';//Это важно заменить прозрачность в rgba на 1 (непрозрачно), потому что Google Chrome помнит
//предыдущее значение, которое мы устанавливали, рисуя облака (круги) на заднем фоне, в
//Firefox и Safari этого не происходит
var gradient = ctx.createRadialGradient(that.x + (platformWidth/2), that.y + (platformHeight/2), 5, that.x + (platformWidth/2), that.y + (platformHeight/2), 45);
gradient.addColorStop(0, that.firstColor);gradient.addColorStop(1, that.secondColor);ctx.fillStyle = gradient;ctx.fillRect(that.x, that.y, platformWidth, platformHeight);//заполняем прямоугольную платформу градиентной заливкой
};
return that;
};

Платформы должна быть нарисованы на каждом кадре, так что обновление GameLoop () является обязательным.

var GameLoop = function(){(...)platforms.forEach(function(platform){platform.draw();
});
(...)
};

Часть 4б. СТОЛКНОВЕНИЯ

Чудненько, но нет взаимодействия между ангелом и платформами. Одна маленькая функция исправит ситуацию. Позвольте мне представить checkCollision ():

var checkCollision = function(){platforms.forEach(function(e, ind){//проверяем каждую платформуif ((player.isFalling) &&
//только когда персонаж падает(player.X < e.x + platformWidth) &&
(player.X + player.width > e.x) &&
(player.Y + player.height > e.y) &&
(player.Y + player.height < e.y + platformHeight)//и находится прямо над платформой) {e.onCollide();}})}

Еще одно обновление основного цикла (подходящий момент, чтобы закомментировать функцию MoveCircles (), если платформы стоят на месте, почему фон движется? будет больше смысла, когда мы будем осуществлять прокрутку платформ и фона одновременно). Так GameLoop () функция должна выглядеть в настоящее время:

var GameLoop = function(){clear();//MoveCircles(5);DrawCircles();
if (player.isJumping) player.checkJump();if (player.isFalling) player.checkFall();
platforms.forEach(function(platform){platform.draw();});
checkCollision();
player.draw();gLoop = setTimeout(GameLoop, 1000 / 50);}

Результат этой части урока можно посмотреть по адресу: http://jsbin.com/igeta3/, а скачать исходники тут: http://guthub.com/michalbe/Simple-game-with-HTML5-Canvas. Думаю следующая часть будет последней, но кто знает;)

Копирайты.

Автор: Михал Будзинский https://twitter.com/#!/@michalbe

Автор перевода: Андрей Семенов https://twitter.com/#!/a_semenov79

Простая игра на HTML5 Canvas - часть 3

2011-11-02T12:56:00.000-07:00

Часть 3а. Физика

Потому что физика в StH очень проста, нет никакой необходимости включать какой-то физический движок, как например Box2d (http://box2d-js.sourceforge.net/). Прыжки главного персонажа настолько просты, что реализуются в нескольких строках кода. Давайте разделим его на две несвязанные части - прыжки и падения. Когда объект начинает прыгать, он имеет некоторую начальную скорость, снижающуюся под действием силы тяжести. Это стадия заканчивается, когда эта скорость полностью сводится к нулю и гравитация начинает тянуть объект вниз с нарастающей силой. Это вторая часть прыжка - падение. Научим ангела, как себя вести в таких ситуациях, давайте расширим объект ‘player’ добавив несколько атрибутов

var player = new (function(){
  var that = this;
  that.image = new Image();
  (...)
//новые атрибуты
  that.isJumping = false;
  that.isFalling = false;
//состояние объекта в булевых переменных (взлет или падение)?
  that.jumpSpeed = 0;
  that.fallSpeed = 0;
  //ускорение взлета и падения

  (...) //остальная часть кода
  })();

Теперь давайте внедрять методы ответственные за прыжки. Дальнейшее расширение объекта ‘player’:

  that.jump = function() {
  //инициализация прыжка
  if (!that.isJumping && !that.isFalling) {
  //сначала проверим - объект не должен находиться в состоянии взлета или падения,
  //чтобы не подпрыгивать не имея опоры (из воздуха)
  that.fallSpeed = 0;
  that.isJumping = true;
  that.jumpSpeed = 17;
  //начальная скорость
  }
  }
  that.checkJump = function() {
  //начинаем взлетать
  that.setPosition(that.X, that.Y - that.jumpSpeed);
  //перемещаемся вверх с приростом на jumpSpeed пикселей
  that.jumpSpeed--;
  //имитируем гравитацию уменьшая ускорение взлета
  if (that.jumpSpeed == 0) {
  //и если ускорение взлета упало до нуля, начинаем падать
  that.isJumping = false;
  that.isFalling = true;
  that.fallSpeed = 1;
  }
  }
  that.checkFall = function(){
  //почти тоже, что и checkJump()
  if (that.Y < height - that.height) {
  //проверяем, не достигнут ли нижний край экрана и увеличиваем fallSpeed
  //(ускорение свободного падения)...
  that.setPosition(that.X, that.Y + that.fallSpeed);
  that.fallSpeed++;
  } else {
  //.. иначе – отскок (снова взлетаем)
  that.fallStop();
  }
  }
  that.fallStop = function(){
  //хватит падать, пора снова взлетать
  that.isFalling = false;
  that.fallSpeed = 0;
  that.jump();
  }

Это обязательно обновлять основные функции цикла для перерисовки позиции нашего персонажа во время прыжков и падений. Обновляем GameLoop (игровой цикл) таким кодом, прежде чем перерисовать персонаж:

if (player.isJumping) player.checkJump();
if (player.isFalling) player.checkFall();

Я думаю, что код показанный выше достаточно прост для понимания. Последнее действие, которое мы должны выполнить, просто запустить первый прыжок, сразу после размещения персонажа на сцене.

player.setPosition(~~((width-player.width)/2), ~~((height - player.height)/2));
player.jump(); //здесь

Хорошо, красиво прыгает, фрагмент удивительного псевдо-физического кода. Теперь давайте сделаем некоторые элементы управления.

Часть 3b. Управление

Главный герой StH может двигаться только вбок. Он подпрыгивает автоматически, вверх/вниз движения будут зависеть от платформ. Пользователь может только командовать ангелу, переместиться влево или вправо. Опять же, это может быть достигнуто путем расширения объекта ‘player’ дополнительными методами.

Теперь привяжем функцию к положению курсора мыши (ангел будет следовать за ним).

document.onmousemove = function(e){
  if (player.X + c.offsetLeft > e.pageX) {
  //если мышь слева от персонажа сдвигаем его влево.
  player.moveLeft();
  } else if (player.X + c.offsetLeft < e.pageX) {
  //иначе направо?
  player.moveRight();
  }
  }

Это все на сегодня. В следующей части я покажу рисование платформ и контроль столкновений. Как обычно, результат этой части урока можно посмотреть по адресу: http://jsbin.com/uhaka3/, а скачать исходники тут: http://guthub.com/michalbe/Simple-game-with-HTML5-Canvas

Копирайты.

Автор: Михал Будзинский https://twitter.com/#!/@michalbe

Автор перевода: Андрей Семенов https://twitter.com/#!/a_semenov79

Простая игра на HTML5 Canvas – часть 2

2011-10-29T05:07:00.000-07:00

Персонаж

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

Давайте создадим объект, представляющий главного героя со всеми необходимыми атрибутами и методами. Назовем объект ‘player’ (англ. – игрок). Далее мной выбран не лучший способ описания объекта в JS, потому что все атрибуты являются доступными, а закрытые не применяются вообще. Но это простейшее решение, позволяющее уложиться в запланированные 10КБ, а главное что это работает. Если вам захочется узнать о закрытых атрибутах и методах, наследовании и т.п. прочитайте об этом в учебнике по JavaScript (на англ.языке можно прочитать тут - http://jibbering.com/faq/notes/closures/ ). Также важно помнить что если вы соберетесь уменьшить код с помощью онлайн инструментов, таких как ‘Closure Compiler’ (http://closure-compiler.appspot.com/home) что имена аргументов объектов он не сокращает. Именно поэтому я использую 2-х буквенные сокращения для описания объекта, например, ‘player.im’ вместо ‘player.image’. Итак, вот код, который добавляется в наш game.js:

var player = new (function(){

//создаем новый объект основанный на функции

//и присваиваем его переменной ‘player’

var that = this;

//'that' – псевдоним этого объекта

//attributes

that.image = new Image();

that.image.src = "angel.png";

//создаем новый Image элемент и

//'angel.png' закачиваем в него

that.width = 65;

//ширина одного кадра

that.height = 95;

//высота одного кадра (рисунок в 2 раза выше, ведь в нем 2 кадра)

that.X = 0;

that.Y = 0;

//X&Y позиция объекта на холсте

//далее описываем методы

that.setPosition = function(x, y){

that.X = x;

that.Y = y;

}

that.draw = function(){

try {

ctx.drawImage(that.image, 0, 0, that.width, that.height, that.X, that.Y, that.width, that.height);

//отрисовываем наш персонаж функцией drawImage(объект-рисунок, X источника,

//Y источника, ширина источника, высота источника, X назначения (X позиция),

//Y назначения (Y позиция), ширина назначения, высота назначения)

} catch (e) {

//Иногда, если изображение персонажа слишком велико и еще не успело

//загрузиться до вывода первого кадра, JavaScript выдаст ошибку и прекратит

//выполнение всего. Чтобы этого избежать, мы перехватываем ошибку и повторим

//попытку рисования в следующем кадре. Это незаметно для пользователей ведь

//частота кадров 50 в секунду.

}

})();

//мы сразу же применим функции описанные выше

//и создадим переменную ‘player’

//как новый объект

player.setPosition(~~((width-player.width)/2), ~~((height - player.height)/2));

//наш персонаж готов, давайте переместим его

//в центр экрана,

//'~~' возвращает округленное вниз целое значение

//переменной с плавающей точкой, как это делает Math.floor()

Итак, теперь необходимо перерисовывать нашего ангела на каждом кадре в игровом цикле с помощью функции ‘player.draw’:

var GameLoop = function(){

clear();

MoveCircles(5);

DrawCircles();

player.draw();

gLoop = setTimeout(GameLoop, 1000 / 50);

}

Ну а как насчет анимации? Спрайт (файл с изображением ангела) имеет 2 кадра, но только один из них перерисовывается на каждом кадре. Для того, чтобы анимировать наш персонаж потребуются дополнительные атрибуты и небольшие изменения метода ‘draw’:

var player = new (function(){

(...)

that.frames = 1;

//нумерация кадров начинается с нуля

that.actualFrame = 0;

//текущий кадр

that.interval = 0;

//нам не прийдется переключать кадры

//в игровом цикле, ‘interval’ позаботится об этом

that.draw = function(){

try {

ctx.drawImage(that.image, 0, that.height * that.actualFrame, that.width, that.height, that.X, that.Y, that.width, that.height);

//третий аргумент умножается на номер текущего кадра, чтобы показать нужную

//часть исходного изображения

} catch (e) {};

if (that.interval == 4 ) {

if (that.actualFrame == that.frames) {

that.actualFrame = 0;

} else {

that.actualFrame++;

}

that.interval = 0;

}

that.interval++;

//выше показана простая логика переключающая кадры каждые 4 итерации

}

})();

Спасибо за внимание! Результат работы проделанной в данной части урока, как обычно, можно посмотреть по адресу: http://jsbin.com/orohe4/, а исходники скачать тут: http://github.com/michalbe/Simple-game-with-HTML5-Canvas/tree/master/part2/

КОПИРАЙТЫ.

Автор: Михал Будзинский https://twitter.com/#!/@michalbe

Автор перевода: Андрей Семенов https://twitter.com/#!/a_semenov79

Простая игра на HTML5 Canvas - часть 1

2011-10-27T14:05:00.000-07:00

Предисловие от автора перевода.

Итак, я наконец-то подготовил перевод статьи Михала Будзинского открывающей нам новый web-стандарт HTML5. Этот стандарт еще не имеет утвержденной спецификации и представлен на сайте w3.org только как рабочий черновик, но уже активно продвигается производителями браузеров. Новшества, вносимые новой версией HTML (язык разметки гипертекстов) сближают его с языками программирования. Благодаря активному развитию социальных сетей, «облачных» сервисов и т.п. все яснее прослеживается необходимость улучшения интеграции мультимедийного контента и новый тэг <canvas> стал одним из решений данного вопроса представленный консорциумом.

Движок игры написан на JavaScript и те, кто еще не знаком с этим языком программирования найдут здесь также замечательные примеры для его начального освоения.

Введение.

StH - очень простой клон Doodle Jump, но чтобы быть до конца честным, я был вдохновлен Icy Tower. Ну да ладно.

Цель игры состоит в том, чтобы управлять маленьким ангелом и скакать на двух видах платформ - оранжевые (обычные) и зеленые (трамплины). Игра заканчивается, когда ангел падает за нижний край экрана.

Я создал эту игру за 8 часов и позже, когда довольно долго играл, я обнаружил немного ошибок, так что в этом уроке, я хочу исправить их все. Давайте приступим!

Фон.

Поскольку вся игра, включая изображения и сценарии (скрипты), не должна быть больше 10КБ, я не захотел использовать растровое изображение на фоне. Гораздо экономичнее рисовать используя функции рисования <canvas>.

Прежде всего, мы нуждаемся в небольшом HTML, ничего особенного, только один <canvas> элемент с некоторым уникальным id, немного CSS и несуществующий, пока еще, game.js:

<html>

<head>

<title> Простая игра с HTML5 Canvas </ title>

<style>

body {margin:0px; padding:0px; text-align: center}

canvas {outline:0; border:1px solid # 000; margin: 0 auto}

</ style>

</ head>

<body>

</ body>

</ html>

Это и есть весь HTML, который нам понадобится в течение этого урока. Хорошо, теперь давайте создавать Javascript. Прежде всего мы должны создать немного глобальных (хотя, я знаю что это Глобальное зло =) переменных и изменить атрибуты (свойства) <canvas>. Этого будет достаточно:

var width = 320, //ширина canvas

height = 500, //высота canvas

c = document.getElementById('c'), //сам canvas

ctx = c.getContext('2d');

//двумерный контектс canvas (сейчас только он поддерживается всеми

//браузерами)

c.width = width;

c.height = height;

//устанавливаем размеры canvas

Первое, что важно понять про <canvas>, это то, что невозможно просто перемещать объекты на его поверхности. Нужно, обязательно, на каждом кадре его очищать, целиком или частично. Поэтому давайте создадим функцию очистки – clear():

var clear = function(){

ctx.fillStyle = '#d0e7f9';

//выбираем цвет заливки (чудесный голубой)

//Использование clearRect() вызывало ошибку, в 2-х строках ниже показан

//старый вариант

//ctx.clearRect(0, 0, width, height);

//очистка экрана

ctx.beginPath();

//запускаем рисование

ctx.rect(0, 0, width, height);

//рисуем прямоугольник из точки (0, 0) до (width, height) заполняя весь наш

//холст <canvas>

ctx.closePath();

//заканчиваем рисование

ctx.fill();

//заполняем прямоугольник цветом выбранным ранее

}

Одноцветный фон скучен как ад, так что давайте нарисуем несколько облаков на нем. Скорее не правильные облака, а простые, полупрозрачные круги, подражающие облакам. Круги мы будем рисовать в случайных местах холста, каждый с различным размером и прозрачностью. Мы будем держать всю информацию о кругах в 2-ом массиве (в JS их нет, но лучший путь к решению этой проблемы помещение одного массива в другой).

var howManyCircles = 10, circles = [];

for (var i = 0; i < howManyCircles; i++)

circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);

//добавляем информацию о кругах

//в массив 'circles'. Это x и y позиция,

//радиус в диапазоне 0-100 и прозрачность

//в диапазоне 0-0.5 (0 это абсолютно прозрачно, 1 непрозрачно)

var DrawCircles = function(){

for (var i = 0; i < howManyCircles; i++) {

ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';

//белый цвет с прозрачностью в rgba

ctx.beginPath();

ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);

//arc(x, y, radius, startAngle, endAngle, anticlockwise)

ctx.closePath();

ctx.fill();

}

};

Хорошо, но скучновато. Почему облака стоят на месте? Давайте сделаем маленькую функцию с одним аргументом, которая сдвигает облака вниз на заданное число пикселей, и, когда определенный круг скрывается за пределами холста, он перемещается наверх с изменением координаты X, радиуса и прозрачности:

var MoveCircles = function(deltaY){

for (var i = 0; i < howManyCircles; i++) {

if (circles[i][1] - circles[i][2] > height) {

//круг достигший нижнего края

//меняет параметры

circles[i][0] = Math.random() * width;

circles[i][2] = Math.random() * 100;

circles[i][1] = 0 - circles[i][2];

circles[i][3] = Math.random() / 2;

} else {

//сдвигаем круг на deltaY пикселей вниз

circles[i][1] += deltaY;

}

};

Теперь, не в последнюю очередь, давайте создадим основной цикл игры и подключим в нем все, что уже создали. Каждый кадр будет очищать экран, перемещать круги на 5px вниз, рисовать их и после 1/50 секунды вызывать следующий кадр. Я использую два setTimeouts вместо одного setInterval, хотя незнаю почему:). Вроде бы раньше были некоторые проблемы с производительностью в IE, что ли. И не забудьте добавить gLoopв глобальные переменные, объявленные вначале.

var width = 320,

//ширина холста <canvas>

height = 500,

//высота холста <canvas>

gLoop,

(...) //остальная часть кода находится здесь

var GameLoop = function(){

clear();

MoveCircles(5);

DrawCircles();

gLoop = setTimeout(GameLoop, 1000 / 50);

}

GameLoop();

Благодарю Луиса Гирибоуна за комментарии к уроку. Он помог разобраться в чем отличие setTimeOut от setInterval. SetInterval запускает функцию переданную ему в аргументе не дожидаясь окончания предыдущей итерации, а setTimeOut ждет ее завершения даже если вышло время переданное в качестве второго аргумента.

Так же хочу поблагодарить пользователя под ником Ped7g за выявленные ошибки.

Результат этой части урока можно посмотреть по адресу: http://jsbin.com/odoho3, а скачать исходники тут: http://github.com/michalbe/Simple-game-with-HTML5-Canvas

Копирайты.

Автор: Михал Будзинский https://twitter.com/#!/@michalbe

Автор перевода: Андрей Семенов https://twitter.com/#!/a_semenov79

SVG. Масштабируемая векторная графика. Часть 4

2011-10-25T11:54:00.000-07:00

Градиенты и текстуры.

А как же градиенты, спросите вы, но я отвечу - это тоже просто. В спецификации определено два типа градиента: линейный и радиальный.

Градиенты положено помещать внутрь тэга контейнера <defs> (от англ. definitions - определения), это говорит о том, что содержимое предназначено для многократного применения. Линейный градиент определен парным тэгом <linearGradient>, (а что же должно быть внутри?) который включает в себя тэги <stop />. В спецификации об этом сказано: "Буйство красок, чтобы использовать в градиенте определено элементами 'stop', которые являются дочерними элементами ‘linearGradient’ элемента или ‘radialGradient’ элемента." Разберем вышесказаное на примере градиента для нашего первого элемента (прямоугольника с фоном):

<defs>
        <linearGradient id="sky_n_water">
                <stop offset="0%" stop-color="#09f" />
                <stop offset="35%" stop-color="#9ff" />
                <stop offset="36%" stop-color="#fff" />
                <stop offset="100%" stop-color="#09f" />
        </linearGradient>
</defs>

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

Рекомендую, для проектирования градиентов использовать Фотошоп и для этого несколько причин. Во-первых в "Редакторе градиентов" мы видим удобную шкалу на которой размещаем наши контрольные точки (тэги <stop />) и offset атрибут мы видим в поле "Позиция", что можно считать вторым плюсом, а в третьих на "Палитре цветов" поставив галочку в "Только Web-цвета" мы в поле "#" видим код RGB 0099ff, который можно смело сокращать до трех цифр 09f и писать их в stop-color атрибут.

Вот так легко и просто, но на практике мы получим прямоугольник с градиентом идущим слева-направо, вместо желанного сверху-вниз. Градиент надо повернуть и нам поможет атрибут gradientTransform = "rotate(90)", который необходимо указать в тэге <linearGradient>.

Применим теперь наш первый градиент на практике:

<defs>
        <linearGradient id="sky_n_water"  gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#09f" />
          <stop offset="35%" stop-color="#9ff" />
          <stop offset="36%" stop-color="#fff" />
          <stop offset="100%" stop-color="#09f" />  
        </linearGradient>
        </defs>
        <style type="text/css"><![CDATA[
          #bg {fill:url(#sky_n_water) #09f; stroke="none"}
        ]]></style>
<rect id="bg" width="100%" height="100%"/>

А вот и новые свойства для нашей «кочки»:

<linearGradient id="grass">
    <stop offset="0" stop-color="#6c0" />
    <stop offset="1" stop-color="#9f3" />
</linearGradient>

.grass {fill:url(#grass) #6c0; stroke:#090; stroke-width:1}

Обратите внимание, на этот раз для параметра offset я использовал не проценты (0 и 1 соответствуют 0% и 100%, а если бы нам понадобилась середина мы написали бы 0.5 вместо 50%).

Радиальный градиент для цветка сделать тоже не сложно. Отличается только тэг обрамляющий наши точки остановки цвета, вместо linearGradient используется radialGradient

<radialGradient id="flower">
   <stop stop-color="#f00" offset="0"/>
   <stop stop-color="#f00" offset="0.3"/>
   <stop stop-color="#fff" offset="0.3"/>
   <stop stop-color="#fff" offset="1"/>
</radialGradient>
.flower {stroke:#ccc; stroke-width:0.01; fill:url(#flower) #f00}

Текстуры в нашем проекте не используются, хотя их успешно можно было бы применить для раскрашивания наших «кочек». Дело в том, что в SVG для текстурирования используются не только растровые текстуры, но и векторные (что важнее). И наши цветочки можно было бы вынести из основного рисунка и поместить в определения <defs> заключив их в тэге <pattern>. Таким образом присвоив текстуре (паттерну) идентификатор мы сможем использовать ее для заливки. Обязательно попробуйте эту методику в ваших проектах — не пожалеете.

Трансформации

Спецификацией предусмотренно несколько видов трансформации - это перемещение (translate), масштабирование (scale), поворот (rotate), наклон по оси Х (skewX), наклон по оси Y (skewY) и matrix, которая в своих шести параметрах может включать сумму нескольких трансформаций. Но поскольку тема матричного представления двумерного пространства выходит за рамки данной статьи примем как факт, что те из вас кто изучал "Высшую математику" разберутся с матричными трансформациями сами, а те кто не изучал либо будут использовать последовательность простых трансформаций, либо найдут учебник по вышке и изучат матрицы самостоятельно. (заранее огорчу - к Морфиусу, Тринити и Нэо наши матрицы отношения не имеют, а их изучение скучнее просмотра одноименного фильма).

Вот матричные трансформации для цветков. Каждая, из них, увеличивает цветок в десять раз и переносит на новое место.

transform="matrix(10,0,0,10,45,75)"
 transform="matrix(10,0,0,10,125,60)"
 transform="matrix(10,0,0,10,160,85)"

Заменить ее обычными можно так:

transform = “scale(10) translate(45,75)”

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

В проекте мы не применяем трансформацию «skewX» или «skewY» предназначенные для наклона объекта по горизонтали или вертикали, но они возможно вам пригодятся для проектов реализующих псевдо3D.Например, из трех прямоугольников можно создать куб, как показано на рисунке.

Для «кочек» я выбрал следующие значения [(3,0,0,3,1000,500), (4,0,0,4,480,410), (6,0,0,6,-150,260)] и получил очередной файл SVG. Да, эта картина грубовата и не сглажена фильтрами и спецэффектами Фотошоп, но я нахожу другой факт более важным - наш SVG весит 7,5 кБ, а этот JPEG с размером 400*250 и качеством 60% уже 18 кБ (а если пытаться сохранить в полном кач-ве и с полным разрешением, то вышло бы - 300 кБ). Еще один плюс - SVG сам масштабируется под разрешение экрана и размер рабочей области браузера, а под растр нам пришлось бы придумывать ухищрения.

И у нас в SVG есть простор для совершенствования, постаравшись мы можем еще уменьшить размер файла, добавив несколько атрибутов изменить стиль линий. Да и визуальные фильтры разработаны W3C, но пока, правда, реализованы не во всех браузерах. Мой любимый Google Chrome в числе передовиков и полностью поддерживает все спецификации консорциума W3C.

Визуальные фильтры.

Не углубляясь в подробности сразу показываю код визуального фильтра:

<filter id="BlurFar"><feGaussianBlur stdDeviation="1.5" /></filter>
<filter id="BlurNear"><feGaussianBlur stdDeviation="0.5" /></filter>
<filter id="BlurSmall"><feGaussianBlur stdDeviation="0.1" /></filter>

  <g transform="matrix(3,0,0,3,1000,500)" filter="url(#BlurFar)">
  <g transform="matrix(4,0,0,4,480,410)" filter="url(#BlurNear)">
   <path d="m0,100 q100,-100 200,0z" class="grass" filter="url(#BlurSmall)" />

Вот такие, незначительные, изменения привносят в наш пейзаж немного реалистичности, за счет DOF (от англ. depth of field - на русский переведу, как глубина резкости). Парный тэг <filter> как и градиенты располагают внутрь контейнера <defs>, и он (в свою очередь) содержит один и более тэгов описывающих фильтры. Я применил тэг <feGaussianBlur> для размытия по Гауссу, а другие фильтры вы без труда отыщите в спецификации. Применять определенный в "defs" фильтр можно и к группам и к отдельным объектам указав им атрибут "filter".

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

SVG. Масштабируемая векторная графика. Часть 3

2011-10-25T11:36:00.000-07:00

Область просмотра, клиппирование.

Клиппирование - это обрезка объектов выходящих за рамки области просмотра (любой другой области). Зачем нам это нужно? Внутрь тэга <svg> я добавил атрибуты viewBox="0 0 1440 800" preserveAspectRatio="xMidYMax slice". ViewBox ограничивает область просмотра и гарантирует нам, что "горизонт" окажется в одной и той же Y координате на разных браузерах. PreserveAspectRatio срежет лишнее по краям и скроет верх изображения если пропорции экрана не позволят все показать.

Таким образом, мы ограничили область просмотра нашего пейзажа окном с размерами 1440 на 800 единиц, которые будут пересчитываться в реальные пиксели уже в браузере и если пропорции его окна просмотра не будут соответствовать заявленным нами, то он возьмет нижний край пейзажа, расположит его снизу и срежет верх, либо обрежет боковые края. Обе ситуации станут понятнее если вы посмотрите на картинку.

Еще один важный момент, который должны помнить те, кто планирует писать файлы SVG своими руками (без применения графических редакторов).Начало координатной плоскости лежит в левом верхнем углу и оси направлены слева-направо и сверху-вниз.

Графические примитивы и их свойства.

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

Начнем со свойств, таких как толщина линии обводки, ее цвет, а так же заливкой, и сразу приведу маленький пример:

<rect width="1198" height="398" fill="none" stroke="blue" stroke-width="1" />

Тут у нас прямоугольник без заливки, но с бордюром синего цвета в 1 единицу толщиной. Эти свойства указаны в атрибутах тэга, что не всегда удобно. И W3C находит выход - свойства можно описать в парном тэге <style> в манере CSS как это делается в HTML документах и тогда написав:

.blueBorder {fill:none; stroke:blue; stroke-width:1}

мы можем задать те же свойства не только вышеописанному прямоугольнику, но и любому другому примитиву указав атрибут class="blueBorder" для тэга примитива например:

<circle cx="600" cy="200" r="100" class="blueBorder" />

Ну что же, теперь мы во всеоружии и можем приступать к написанию нашего пейзажа... Для начала расставим "заглушки" обозначив блоки, которые будем постепенно заполнять:

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css"><![CDATA[
                /* Стили */
        ]]></style>
          <defs>
                /* Градиенты */
        </defs>
        <g>
                /* Группы и примитивы */
      </g>
 </svg>

Тут ненавязчиво появились еще тэги требующие пояснения для новичка. <!DOCTYPE - это еще один из заголовочных обязательных тэгов указывающий на тип документа с которым будет иметь дело браузер его разбирающий. "Ноги" в данном случае растут из древнего SGML, предшественника XML, в котором тип документа описывался файлом .dtd и такой файл для SVG имеется на сервере W3C, в чем мы уверены указывая его в ссылке. Еще один непонятный тэг <![CDATA[ и его пара ]]> ограничивают "неродную" для SVG таблицу стилей написаную в манере CSS, о чем сказано в атрибуте type="text/css" тэга <style>.

Добавим наш фон (прямоугольник) и получим:

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 800" preserveAspectRatio="xMidYMax slice">
        <g>
           <rect id="bg" width="100%" height="100%" />
        </g>
 </svg>

Красным я выделил то, что добавил, и далее буду писать только те куски кода которые будут добавляться. Теперь вы можете увидеть наш первый результат. Надеюсь он вас вдохновил, а чтение не сильно утомило отбив желание изучать SVG.

Что же у нас дальше по плану? Ах да, "кочки". И мы приступаем к рисованию обещанной основы из контура состоящего из ДВУХ точек. Почему их всего две спросят некоторые из вас, а потому, что у нашей кривой Безье только начало и конец, а обратно в начало браузер пройдет кратчайшим путем (по прямой). Мы воспользуемся квадратичной кривой, хотя возможно больше подошла бы кубическая (проверим).

<path d="m0,0 q100,-100 200,0z" />

Вот, вполне приемлемая кочка. Но она пока что черная и стоит не на своем месте. Зададием ей линию обводки. Получим, к примеру:

.grass {stroke:#090; stroke-width:1; fill:#0f0;}

<path d="m0,100 q100,-100 200,0z" class="grass" />

Нарисуем тропинку. Ее опишет следующий путь - "m50,0 q50,-10 70,-47 0,50 -20,47z" или "m50,0 q10, -50 70,-47 -50,0 -20,47z", обратите внимание - точки в обоих случаях одни и те же, изменяются только опорные пункты путей (нам нужны оба вида "тропинок", чтобы отличать первую и вторую "кочки"), а стиль у них будет такой "fill:#cc9; stroke:#990; stroke-width:2" назовем его footPath.

.footPath {fill:#cc9; stroke:#990; stroke-width:2}

<path d="m50,0 q10,-50 70,-47 -50,0 -20,47z" class="footPath" />

Переходим к цветочкам. Точнее, нарисуем контур одного цветка, а затем создадим несколько трансформированных копий этого цветка. Путь я "выдернул" из оптимизированного SVG сгенерированного в Inkscape - "m0.54688,-0.11829 c-0.37472,-0.43643 -0.25072,1.0885, 0.04856,0.59722, 0.29928,-0.49124 -1.1127,0.09791-0.55298,0.23074, 0.55967,0.13283, -0.43695,-1.0279 -0.39033,-0.45461, 0.046622,0.57333, 0.84261,-0.73321, 0.31175,-0.51171 -0.53086,0.22151, 0.95771,0.57479, 0.583,0.13836z" для свойств используем радиальный градиент (как его сделать вы узнаете в следующей части статьи) и тонкую серую обводку. «Кочка» почти готова, но она пока еще не на своем месте, как и цветочки, которых хоть и три, но они пока что маленькие и наложены друг на друга.

.flower {stroke:#ccc; stroke-width:0.01}

<path d="m0.5468 .. 0.1383z" class="flower" />
<path d="m0.5468 .. 0.1383z" class="flower" />
<path d="m0.5468 .. 0.1383z" class="flower" />

Объединяем элементы описывающие "Кочку" тэгом контейнером <g> в группу, дважды "копипастим" (дублируем) получая таким образом три "Кочки", как и было задуманно вначале. В первой группе оставляем только цветок в середине, а в средней удаляем первый цветок (их перекроют другие объекты, поэтому они лишние). Меняем путь в тропинке средней "Кочки", а в передней вообще его удаляем. Таким образом мы получаем три группы расположенные одна над другой и нам осталось только указать для каждого тэга <g> атрибут transform="matrix()", дабы разместить их на холсте с нужным масштабом и в нужных координатах, но об этом речь пойдет в следующей части статьи.

"Облака и островок справа". Три контура: Белое облако с голубой обводкой, голубое облако без обводки и "пролесок" темно-зеленый без обводки объеденены в группу, котораябудет перемещена в правую часть горизонта. Здесь вы можете посмотреть на контуры. Затем была создана копия этой группы, чтобы "отразиться" в воде. Этой группе добавлен атрибут opacity (прозрачность).

<g>
 <path d="m..z" fill="#fff" stroke-width="1" stroke="#09f" />
 <path d="m..z" fill="#3cf" />
 <path d="m..z" fill="#060" />
</g>
<g opacity="0.5">
 <path d="m..z" fill="#fff" stroke-width="1" stroke="#09f" />
 <path d="m..z" fill="#3cf" />
 <path d="m..z" fill="#060" />
</g>

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

Файл уже весит 7,5 кБ, но мы то помним, что Jpeg с таким разрешением и количеством оттенков весит как минимум в десять раз больше. Остались мелочи: два облачка посреди небосвода и два деревца на двух "кочках".

Сначала деревца. Здесь можно взглянуть на контуры. Крона сформирована из трех клонов одного и того же контура. Думаю вы уже достаточно попрактиковались и сразу заметили, что применением атрибута opacity для среднего контура кроны мы достигаем эффекта при котором создается впечатление, что контуров больше и используется не 3, а 5 оттенка зеленого.

Первое дерево мы вставляем в группу "левой кочки". Дерево на второй "кочке" появляется за счет матричной трансформации и на этот раз я кроме масштабирования и переноса буду использовал отражение по вертикали. Добавляем эту группу к средней "кочки" и, само собой разумеется, она получит "в наследство" размытие, которое в литературе принято называть DOF, которое будет реализовано визуальным фильтром рассматриваемым в следующей части статьи.

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

SVG. Масштабируемая векторная графика. Часть 2

2011-10-25T11:03:00.000-07:00

Пишем файл SVG своими руками.

В прошлой части статьи мы уже выяснили, что файлы SVG текстовые, а стало быть фраза «написать пейзаж» приобрела второй, более привычный простому обывателю смысл. Итак минимальная заготовка файла SVG включает в себя следующий код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

</svg>

Здесь в первой строке стандартный для всех файлов семейства XML пролог (лат.: - вступление). Ведь для вас не секрет, что файлы SVG из этого семейства. Во второй строке парный тэг <svg> ограничивающий тело документа и это для вас очевидный факт, ведь в последней строке вы видите его "хвост" - закрывающий тэг </svg>. Надеюсь, что стандартный комментарий (в третьей строке) указывающий куда мы будем писать дальше, тоже никого не напугал. Тем же, для кого все вышесказанное - "темный лес", а желание освоить материал все-таки присутствует рекомендую отыскать на просторах интернета толковый учебник по XML 1.0

С теми, кто все еще в строю, едем дальше... Разработаем схему нашего рисунка, а для начала найдем себе референсы в сети, либо нарисуем от руки, то что хотим увидеть в итоге. Я применил оба подхода и накопав кучу малоприемлемых картинок нарисовал (по аналогии с одним из понравившихся) свой:

Вот так, наскоро набросав ручкой на листке, отсканировав и разукрасив в Фотошопе я получил растровый эскиз будущего векторного рисунка.

Начнем со схемы документа и структура SVG файла "нам в помощь". Ведь то, что находится на заднем плане должно идти вначале, а то, что будет указано в файле в последнюю очередь отобразиться на рисунке в верхнем (наружном) слое, т.е. на переднем плане. И не будем забывать об оптимизации кода, о его минимализации. Итак, подложкой на нашей картине станет прямоугольник закрашенный сложным градиентом, где в верхней части мы переходим от темно-синего к светло-синему, а ниже от белого к темно-синему изображая, таким образом, небо и воду (еще не решил что это - море или озеро) эффектно выделив горизонт. Затем у нас будут идти три сгруппированных объекта, которые мы назовем "кочки" или "островки", кому как больше понравиться. Почему мы говорим о группах? Да просто, так мы нарисовав один сложный (составной) объект можем скопировав его и слегка трансформировав получить новый. Таким образом, сначала рисуется правая (на рисунке) "кочка", затем она увеличивается и переносится немного влево, затем сделаем еще одну копию и повторим увеличение и перенос.

Два деревца на двух передних "кочках" это тоже клоны для которых применена трансформация "масштаб+перенос". Облака отражающиеся в воде, это тоже пары, где клон имеет масштаб равный " 1" по оси Y и "+1" по оси Х, что приводит к отражению Y координат относительно оси Х (эффект "зеркала"). То же касается и пролеска, который виден вдали (может это островок, а может противоположный берег залива, решайте сами). Ну и в последнюю очередь идут облака которые мирно висят посреди нашего неба и не имеют отражений.

Теперь "копнем поглубже" и поговорим о группах - сложных объектах состоящих из нескольких контуров. На моей картинке я вижу таких несколько: это "кочки" о которых мы уже говорили, а так же отражающиеся облака и деревья. С облаками все просто, тут по два контура, где на заднем плане (напоминаю, что в файле он будет идти впереди/вначале) контур с белым фоном, ближе контур залитый голубой краской. Чуть больше работы предстоит с деревьями, ведь тут у нас крона из трех контуров с разными оттенками зеленого, но вперед мы изобразим ствол дерева в виде контура залитого коричневой краской (простите, забыл покрасить в Фотошопе) и тогда крона идущая в файле следом за ним накроет его на картине. И наконец, "высший пилотаж", наши "островки-кочки"... Здесь залитая градиентом от темно-зеленого к светлому основа представленная контуром ограниченному ДВУМЯ точками, но об этом позже. На первом и втором клоне добавлены тропинки, чтобы картинка не получилась совсем уж скучной пав жертвой моего желания оптимизировать/минимизировать. И цветочки повсюду, что может быть чудесней, один контур и градиент по схеме красный-красный-белый-белый, т.е. нам не нужно рисовать серединку и лепестки отдельно, а выделить этот факт цветом. К тому же сделав несколько вариантов градиента для цветов мы сможем сделать красивые и пестрые газончики.

Ну вот, первый этап нами уже пройден и мы можем начертить схему документа, который будем писать на SVG. Формат SVG являясь членом семейства XML наследует от него важный признак - древовидную структуру, которую мы и отображаем в нашей схеме:

Файл который мы напишем лишь слегка отличается, дополняя ее нюансами реализации.

В своем проекте мы будем использовать только два графических примитива - это прямоугольник и контур, но для "общего развития" сообщу, что в спецификации SVG описаны еще несколько, это: круг, овал, линия, полилиния и полигон (многоугольник), и еще (чуть не забыл) текст.

Начнем вникать в тонкости описания примитивов. С прямоугольником, который представлен тэгом <rect />, что вполне естественно, никаких сложностей быть не может. Тут среди прочих нам важны четыре атрибута, два на позицию (положение на холсте - Х и Y) и два на размер (ширина и высота). Гораздо сложнее примитив "контур" - тэг <path /> у которого есть атрибут под названием "d" (от англ. data - данные) - это и есть собственно путь по которому пойдет перо рисуя наш контур. Давайте подробнее разбираться, ведь в спецификации этой теме посвящена вся восьмая глава...

Итак, про атрибут "d" в спецификации сказано, что он - "определяет контур фигуры". Осталось выяснить как он это делает. Читаем спецификацию дальше и находим вот что: "атрибут ´d´ содержит инструкции для перемещения, рисования линии, дуги, кривой Безье (и квадратичной и кубической), а также закрытия (замыкания).". Эти инструкции (команды) записываются латинскими буквами и ниже я привожу таблицу с их определением:

M или m (x, y)	Начинает новый подконтур в заданных (x, y) координатах. М. (прописная буква) указывает, что далее следуют абсолютные координаты; м. (строчная) указывает, что координаты относительные. Если эта команда сопровождается многократными парами координат, следующие пары это неявные команды рисования линий (L / l). Следовательно, неявные команды будут относительны, если команда перемещения пера относительна, и абсолютны, в противном случае. Если (m) появляется как первый элемент контура, то эту команду принимают как (М) с парой абсолютных координат, но в этом случае, все последующие пары координат считаются относительными несмотря на то, что начальная команда интерпретируется как перенос пера в абсолютной системе координат.
Z или z без параметров	Закрывает текущий контур, рисуя прямую линию от текущей точки до начальной точки текущего подконтура. Так как Z и z не берут никакие параметры, они имеют идентичный эффект.
L или l (x, y)	Рисует линию от текущей точки до заданной (x, y) координатами, которые становятся новой текущей точкой. L (прописная буква) указывает, что далее следуют абсолютные координаты; l (строчная) указывает, что будут следовать относительные координаты. Множество пар координат может быть определено, чтобы рисовать «ломаную» линию. В конце команды, новая текущая точка устанавливается на заключительный набор координат.
H или h (x)	Рисует горизонтальную линию от текущей точки (cpx, cpy) к (x, cpy). H (прописная буква) указывает, что будут следовать абсолютные координаты; h (строчная) указывает, что будут следовать относительные координаты. "x" можно указать многократно (хотя обычно это не имеет смысла). В конце команды, новой текущей точкой становится (x, cpy) в последнем x.
V или v (x)	Рисует вертикальную линию от текущей точки (cpx, cpy) к (срx, y). V (прописная буква) указывает, что будут следовать абсолютные координаты; v (строчная) указывает, что будут следовать относительные координаты. "x" можно указать многократно (хотя обычно это не имеет смысла). В конце команды, новой текущей точкой становится (cpx, y) в последнем y.
C или с (x1, y1, x2, y2, x, y)	Рисует кубическую кривую Безье от текущей точки до (x, y) используя (x1, y1) как контрольный пункт в начале кривой и (x2, y2) как контрольный пункт в конце кривой. C (прописная буква) указывает, что абсолютные координаты будут следовать; c (строчная) указывает, что относительные координаты будут следовать. Могут быть определены многократные наборы координат, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
S или s (x2, y2, x, y)	Рисует кубическую кривую Безье от текущей точки до (x, y). Первым контрольным пунктом (вначале кривой) считается отражение второго контрольного пункта на предыдущей команде относительно текущей точки. (Если нет никакой предыдущей команды или если предыдущая команда не была C, c, S или s, считается, что первый контрольный пункт совпадает с текущей точкой.) (x2, y2) - второй контрольный пункт (то есть, контрольный пункт в конце кривой). S (прописная буква) указывает, что абсолютные координаты будут следовать; s (строчная) указывает, что относительные координаты будут следовать. Многократные наборы координат могут быть определены, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
Q или q (x1, y1, x, y)	Рисует квадратичную кривую Безье от текущей точки до (x, y) используя (x1, y1) как контрольный пункт. Q (прописная буква) указывает, что абсолютные координаты будут следовать; q (строчная) указывает, что относительные координаты будут следовать. Многократные наборы координат могут быть определены, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
T или t (x, y)	Рисует квадратичную кривую Безье от текущей точки до (x, y). Контрольный пункт принят, чтобы быть отражением контрольного пункта на предыдущей команде относительно текущей точки. (Если нет никакой предыдущей команды или если предыдущая команда не была Q, q, T или t, предполагется, что контрольный пункт совпадает с текущей точкой.) T (прописная буква) указывает, что абсолютные координаты будут следовать; t (строчная) указывает, что относительные координаты будут следовать. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
A или а (rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)	Рисует краткую дугу от текущей точки до (x, y). Размер и ориентация эллипса определяют два радиуса (rx, ry) и угол x-axis-rotation, который указывает, как эллипс в целом вращается относительно текущей системы координаты. Центр (cx, cy) эллипса рассчитан автоматически, чтобы удовлетворить ограничениям, наложенным другими параметрами. large-arc-flag и sweep-flag вносят вклад в автоматические вычисления, и помогают определить, как дуга оттянута.

У нас готово почти все чтобы начать писать файл с нашим пейзажем, а пока "лирическое отступление"...

Перед началом самостоятельной работы с SVG я рекомендую почитать файлы сгенерированые графическими редакторами. Ничего (к сожалению) не могу сказать о Adobe Illustrator'e, потому что им я никогда не пользовался. Знаю Corel Draw экспортирует, но он является продуктом коммерческим и не каждый осилит его приобретение только для того, чтобы поэкспериментировать с экспортом в SVG. Я рекомендую скачать редактор векторной графики Inkscape с одноименного сайта http://www.inkscape.org. Этот редактор распространяется бесплатно, и что самое главное, SVG его родной формат. Сохраняйте файлы в режиме "Оптимизированный SVG" и открывайте их "Блокнотом" (любым текстовым редактором). В режиме оптимизации мы видим минимум "мусора" в коде файла и если вам лень "просчитывать" ваши рисунки можете использовать Inkscape как основной инструмент для создания SVG файлов.

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

SVG. Масштабируемая векторная графика. Часть 1

2011-10-25T10:44:00.000-07:00

CG.

Компьютерная графика (CG от англ. - Computer Graphics), в привычном на сегодняшний день понимании, развивается с момента появления первых графических операционных систем. И начиная с первых их реализаций она разделилась на два основных направления: графика растровая и векторная. Для этих направлений разработано и применяется великое множество форматов файлов, редакторов и просмотровщиков. Для того, чтобы понять в чем основное отличие растровой и векторной картинки давайте посмотрим на пример показанный ниже.

Здесь мы видим смайлик, который при масштабе 1х1 будет выглядеть одинаково и для растровой и для векторной графики. Различия проявляются при масштабировании. При увеличении в десять раз мы на растровой картинке, которая показана в центре видим, что точки превратились в квадратики, а на векторной картинке (справа) край области изображающей глаз смайлика остался гладким.

Так будет всегда и это справедливо для любых типов файлов. Для примера отмечу, что BMP, JPEG, PNG относятся к растровым, а EMF, AI, CDR к векторным. И если опуститься до уровня кода этих файлов, то можно говорить о том, что файлы растровой графики содержат информацию о цвете пикселей (точек) располагающихся в виде прямоугольной матрицы, а файлы графики векторной информацию об объектах картины, которыми могут быть простые фигуры, как прямоугольник, круг, овал, и т.п., а так же их свойствах (размер, положение, цвет обводки и заливки).

В данной статье речь пойдет о SVG (от англ. - Scalable Vector Graphics) масштабируемой векторной графике предназначенной для сети Интернет.

Интернет.

Возможно не всем известно, но глобальная сеть и связанные с ней технологии не живут сами по себе, а развиваются под чутким надзором организации под названием World Wide Web Consortium(сокр. W3C). Эта организация, далее консорциум, состоит из представителей крупнейших фирм имеющих отношение к компьютерной индустрии. Представители таких фирм как IBM, Canon, Adobe, Opera, Google и т.д. собираются вместе и объединяются в рабочие группы, чтобы определить каким Интернет будет завтра.

Результаты своей деятельности представители консорциума выкладывают в сети по адресу http://www.w3.org и там вы всегда можете просмотреть документы на которые обязаны опираться разработчики программного обеспечения, например, браузеров.

Одна из рабочих групп консорциума занимается разработкой спецификаций SVG. Сформировалась эта группа в теперь уже далеком 1998 году. Возглавил ее Джон Феррайола (более подробную информацию о котором можно найти на страничке http://jonferraiolo.sys-con.com), тогда представитель от Adobe, а ныне член команды IBM. 29 октября 98 года он опубликовал требования к формату SVG и рабочая группа преступила к разработкам.

В составе группы опубликовавшей 11 февраля 1999 года первый черновик спецификации были: по два представителя от Microsoft, IBM, Netscape, Adobe, Corel и по одному отAutodesc, SUN, Apple, Xerox, Visio, HP, Macromedia, Quark,CCLRC, Inso; всего 20 человек. С тех пор состав рабочей группы конечно же несколько раз менялся, но работы велись непрерывно и о своей деятельности команда регулярно отчитывалась как на сайте консорциума, так и в Твиттере под ником @svgwg.

4 сенября 2001 года была опубликована первая спецификация - SVG 1.0, что дало возможность авторам (cg–художникам) быть уверенными в том, что результат их творчества будет одинаково передаваться конечному потребителю браузерами и редакторами.

Потом публиковались различные рекомендации, были сформированы требования для передачи формата SVG мобильными устройствами, особенности применения с нестандартными кодировками и т. п.

И наконец 16 августа 2011 года вышла вторая редакция спецификации — SVG 1.1

Отличия SVG от других векторных форматов.

Забегая вперед, заглянем внутрь файла SVG. Нам сразу становится ясно, что это обычный текстовый файл и объекты описаны в нем языком, который и определен спецификацией W3C, чего нельзя сказать, к примеру, о файлах EMF.

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

Более того, формат SVG относится к категории открытых и это означает, что мы всегда сможем узнать о том, как он устроен, чего нельзя сказать о фирменных форматах AI (Adobe) и CDR(Corel), которые разрабатываются производителями графических редакторов. И это еще один плюс рассматриваемого формата, но есть у него и минусы, о которых мы поговорим далее...

Минусы формата SVG.

Формат SVG задумывался, кроме всего прочего, и для экономии трафика в сети Интернет. Всегда ли такая экономия имеет место? Я отвечу — Нет. Дело в том, что для изображений маленьких размеров гораздо выгоднее применять растровую графику (к примеру PNG).

Кроме того, есть у SVG и проблемы с интеграцией на web страницах. Несмотря на то, что Microsoft входит в состав рабочей группы SVG полноценная поддержка формата браузером Internet Explorer не обеспечена до сих пор, а частичная начинается только с, последней на сегодняшний день, девятой версии этого браузера. ВерсииIE ниже девятой отображали файлы SVG только с применением плагина. Это обусловлено, с моей точки зрения, извечным желанием компании Билла Гейтса «перетянуть одеяло на себя».

Браузер Mozilla и некоторые другие отображают графику из файлов SVG, но не могут использовать их в качестве фоновых в связи с тем, что размер изображения может быть опущен (не указан в файле), а вычисление реальных координат объектов вызывает трудности. И только Google Chrome с легкостью обращается с файлами SVG.

Основную конкуренцию формату сегодня составляет графика интегрированная в новый, пока еще, формат гипертекста HTML5. Теперь картинки можно описывать прямо в тексте страницы выделив этот фрагмент кода парным тэгом <CANVAS>.

Анимация и интерактивность, которые также предусмотрены в формате SVG, гораздо лучше проработаны во Flash и даже несмотря на то, что он требует установки плагина (Flash Player) на большинстве браузеров, он пользуется гораздо большей популярностью. Напомню, что формат Flash был создан и разрабатывался компанией Macromedia, а в последующем перешел к Adobe и развивается ею по сей день.

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

Содержание спецификации SVG 1.1

Давайте для ознакомления с форматом SVG рассмотрим содержание спецификации. В первых двух главах мы видим введение и концепцию языка. В третьей главе речь идет о модели представления, т.е. о том, как программы предназначенные для отображения файлов SVG должны их читать. Затем в четвертой главе рассматриваются базовые типы и интерфейсы, а следом в пятой главе рассмотрена структура файлов (документов) SVG. Глава 6 посвящена стилизации объектов рисунка. Седьмая глава рассматривает систему координат, трансформации и единицы измерения. В восьмой главе говорится о кривых, а в следующей 9 главе остальных базовых фигурах, отдельно в 10 главе рассмотрен объект «Текст». Далее в 11 главе речь идет о заливке объектов, их обводке и маркерах. Глава 12 посвящена краскам, тринадцатая глава расскажет об альтернативных способах заливки, таких как градиент и текстура. В главе 14 говориться об обрезке, маскировании и композиционировании. Пятнадцатая глава посвящена визуальным фильтрам. Главы 16,17 и 18 сообщат нам соответственно об интерактивности, связывании и использовании сценариев. Следующая 19 глава расскажет об анимации, 20-я о шрифтах, 21-я о метаданных, 22-я об обратной совместимости, 23-я о расширяемости. Затем в спецификации приведены приложения в количестве 17-ти штук, которые окончательно перекрывают все вопросы связанные с форматом SVG.

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

Порядок освоения будет отличаться от предложенного содержанием спецификации, что обусловлено нарастающей сложностью рассматриваемого материала.

HTML5

2011-10-22T16:19:00.000-07:00

Собрался я, было, написать статью об последних достижениях в области интернет технологий, а именно о новом поколении языка разметки гипертекста HTML5 и вместе с ним каскадных таблицах стилей CSS3, да языке скриптов JavaScript. Дело в том, что современные разработки в этой области продвинулись настолько, что уже не ясно где у сегодняшнего сайта «сердце» — на сервере или на клиентской стороне. В тень отходят серверные языки программирования и системы управления базами данных, как будто их и нет вовсе, когда на сцену выступают библиотеки JQuery, Prototype и все те чудеса которые они демонстрируют пользователям современных сайтов, социальных сетей и электронных магазинов.
Приступая к работе я рассчитывал, что речь пойдет об AJAX, интерактивных интерфейсах и прочих украшательствах вносимых в работу web-страниц скриптами JS. Думал, HTML5 совместно с CSS3 дают авторам новые возможности в оформлении контента и только.., но это лишь верхушка айсберга, который можно не стесняясь назвать «Интернетом V поколения».
Подбирая материал для статьи я немного «погуглил» и первая же интересная ссылка поведала мне вот что: «W3C с радостью объявляет о новом курсе обучения, посвященном “разработке Игр в HTML5”. Цель этого курса состоит в том, чтобы слушатели научились использовать открытые web-технологии типа HTML5, CSS3 и JavaScript для создания мультипользовательских браузерных игр.»
Не скрою, что первой шокирующей новостью для меня явился сам факт, что Консорциум проводит курсы обучения, а лишь потом стала доходить остальная информация. Неужели теперь для создания online игры не нужны PHP, ASP, Perl и т. п.?
Те из вас, кто располагает свободным временем, знанием английского языка и 225€ еще могут успеть записаться на этот курс, вот ссылка http://www.w3techcourses.com/course/view.php?id=9. Я же, к сожалению, из вышеперечисленного ничем похвастать не могу, поэтому вынужден буду разбираться сам.
Начало курса 30.10.2011. Читать лекции будет Михал Будзинский (JavaScript разработчик из Польши. В Твиттере вы можете найти его по адресу https://twitter.com/#!/@michalbe). Весь курс будет состоять из четырех недель обучения, каждая их которых будет посвящена отдельной теме. Вот список тем:
«Основы JS и HTML5». Манипулирование DOM (Объектная модель документа), рисование на холсте <canvas>, сценарии игр и способы управления.
«Давайте заставим это двигаться!!!». Различные способы спрайтовой анимации HTML5, элементарные основы физики из школьного курса, коллизии (столкновения объектов сцены).
«Соединение с другими игроками». Методика подключения игроков, связь двух браузеров без использования серверных языков программирования, многопользовательская игра.
«Развертывание игры». Вся мощь JavaScript, HTML5 & CSS3 вне настольного браузера, особенности мобильных устройств, публикация в AppStores.
В ближайшее время обещаю представить вам перевод статьи Михала Будзинского «Простая игра на HTML5 Canvas».
Андрей [trefas] Семенов
trefas@yandex.ru