31 декабря 2010

В этом году вы не прочитаете...

Привет. В этом году вам не удастся прочитать о многом. Не особо конечно о многом. О достаточно многом. Часть этого много могло быть и отсюда. А может и нет.

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

Я не успел:

  1. Рассказать о Canvas.
  2. Написать TextRPG на JavaScript.
  3. Написать о том как экспортировать анимацию из Blender.
  4. Рассказать о ODE.
  5. Сделать лучший рогалик всех времен и народов.

Canvas

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

<canvas id="game" width="320" height="240">
    Это увидит тот, у кого этот тег не поддерживается.
</canvas>

Теперь когда Canvas помещен на страницу, давайте попробуем что-нибудь нарисовать. Для этого нам нужно добавить на страницу JavaScript.

<script type="text/javascript">
  // Тут будет код.
</script>

Как же нам что-нибудь нарисовать? Просто. Для этого нужно получить контекст Canvas. Сделать это лучше один раз.

var canvas  = null; // Тег Canvas.
var context = null; // Контекст.
var width   = 0;    // Ширина нашего холста.
var height  = 0;    // Высота нашего холста.

// Функция которая будет рисовать.
function draw()
{
    context.fillStyle = "#00CCCC";         // Цвет заливки.
    context.fillRect(0, 0, width, height); // Рисуем закрашенный
}                                          // прямоугольник.

window.onload = function()
{
    canvas = document.getElementById("game"); // Получаем элемент Canvas.
    context = canvas.getContext("2d");        // Получаем контекст,
    width  = canvas.width;                    // ширину и
    height = canvas.height;                   // высоту.

    step();                // Шаг игры.
    setInterval(step, 20); // Через каждые 20 мс происходит следующий шаг.
}

function step()
{
    context.clearRect(0,0,width,height); // Отчищаем холст.
    context.save();                      // Сохраняем состояние.
    draw();
    context.restore();                   // Восстанавливаем состояние.
}

Под состоянием понимаются все настройки контекста, цвет заливки, трансформации (повороты, перемещения, масштабирование).

Хотите знать больше? Тогда можете прочить tutorial от mozilla, а так же можете заглянуть в спецификацию.

Так же можете посмотреть на что способен Canvas по примерам:

Экспериментируйте!

TextRPG

О, это грандиозный проект. Навеян он интерпретатором текстовых приключений, instead. Предполагалось что игра будет сделана на JavaScript, и он делаеться. С переменным успехом конечно, но делается. Я обязательно напишу о ней и покажу, если мне хватит терпения доделать ее.

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

Написать о том как экспортировать анимацию из Blender

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

ODE

Открытый Динамический Движок вот что это такое. Игры с физикой, это круто.

Лучший рогалик всех времен и народов.

Пусть это останется пока тайной. Должны же быть тайны.

Ну...

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