Изометрия в два счёта

17.10.2008, автор Stormit, рубрики: Flash игры, Анимация, Игровые баннеры

Для flash-игры TilePaving использовалась одна маленькая, но полезная хитрость. Никакой изометрии в программном понимании там и в помине нет. Все расчёты для плиток производятся в привычных координатах _x и _y. А интересный ракурс создаётся благодаря двум простым действиям: повернуть символ на 45 градусов (всю игру целиком), а потом сплющить её по вертикали на 50%. Сжать повёрнутый символ во флэше не так-то просто - маркеры трансформации помнят угол поворота и сохраняют возможность растяжения/сжатия по осям самого клипа. Чтобы обойти этот момент, нужно символ временно сгруппировать (Ctrl + g), сжать по высоте и затем разгруппировать (Ctrl + b).

 

Есть конечно и неприятный момент: если символы внутри игры должны сохранить свою “вертикальность”, прийдётся каждый “восстанавливать” вручную. То же самое касается текстов и анимации.

Иногда очень хочется сделать flash-игрушку или заставку в необычном ракурсе, но возиться с тригонометрией не всегда хочется. Гораздо удобнее, когда всё просто и наглядно. Сразу видишь, как это выглядит и что нужно поменять.
В любом случае можно иметь ввиду такой способ.

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

Получается некий отход от стандартного. Просто, а результат может стать в разы лучше.

Интересно на 65%

Хотите почитать позже? Добавьте в социальные сети или закладки

(28) Хитрых на тему «Изометрия в два счёта»

  1. Domik 17.10.2008 в 19:14

    То есть получается что дети и препятствия двигаются строго по оси _x, а эффект наклонной плоскости вызван тем что родительский клип, в котором они размещены, чуть-чуть повернут против часовой стрелки, плюс к этому подходящая проекция графики? Если так то довольно просто и гениально :)

  2. Stormit 17.10.2008 в 19:21

    Именно так :)

  3. Fushigi 19.10.2008 в 10:17

    На самом деле можно не группировать. Маркеры поворота обнулятся если снять выделение и выделить снова ;)

  4. Fushigi 19.10.2008 в 10:45

    А, черт, сглупил ) Это сработает для нескольких объектов, для 1 мувиклипа такое не прокатит, все верно ;)

  5. Stormit 19.10.2008 в 14:22

    Для символа трансформация сохраняется (поэтому и программно есть возможность менять ширину и высоту, как бы он ни был повернут).
    А группировать символ бывает полезно ещё и когда делаешь анимацию, а символу сложно придать нужную форму (ввиду того что он уже повернут). Главное не забыть разгруппировать обратно, а то потом в библиотеке появляются новые символы.

  6. Ixifeus 20.10.2008 в 07:32

    Классная штука! Заметил что, если скачать твои флешки себе на комп,то в верхнем правом углу появляется значёк Хи3 с сылкой на твой сайт - каким образом идёт проверка на местоположение ролика?

  7. Сашка 20.10.2008 в 10:08

    Есть свойство _url , оно и выдает домен, с которого загрузили флэшу.

    ActionScript classes > MovieClip > _url (MovieClip._url property)
    Retrieves the URL of the SWF, JPEG, GIF, or PNG file from which the movie clip was downloaded.

  8. Stormit 21.10.2008 в 09:59

    Точно. 

    if (_url.indexOf("http://domainName.com") != -1) {
	_visible = false;
}
  9. designer 22.10.2008 в 16:12

    Для меня это было новостью, спасибо за интересный материал.

  10. Silen 23.10.2008 в 01:09

    Подскажите пожалуйста, можно ли во Флэше динамически распределять глубину для объектов? Обычно в изометрических игрушках для движущихся объектов в качестве показателя глубины я использовал значение координаты Y, то есть чем ниже был расположен объект, тем ближе он был к камере, условно говоря. Но в Флеш несколько странное представление глубин (в моём понимании странное), тут ведь рисовать несколько объектов на одной глубине нельзя. В AC3, насколько мне известно, в этом отношении ситуация усложнилась ещё больше.
    Может быть вам известно решение сей проблемы малой кровью? )
    http://armorgames.com/files/games/boxhead-more-rooms-173.swf
    Полагаю, создатели данной игры нашли его )

  11. Stormit 23.10.2008 в 22:42

    Нужно смотреть по ситуации
    Для этого примера по ссылке можно каждому объекту присвоить уникальный номер с шагом 1, тогда если их всего 100 штук:
    objectNum = (0-100);//от 0 до 100
    totalNum = 100;
    level = Math.floor(_y) * totalNum + objectNum;

  12. Silen 23.10.2008 в 23:34

    Чудесный способ, спасибо )

  13. Сашка 24.10.2008 в 11:49

    Можно упихать все объекты в массив и упорядочить по _y. Номер в массиве и будет нужной глубиной.

    На практике не проверял, но должно тормозить :(

  14. Silen 24.10.2008 в 20:57

    Тоже интересный вариант, спасибо )
    Однако в моей ситуации кол-во объектов как раз заранее определено, так что способ, предложенный Stormit, подходит идеально и не требует никаких дополнительных расчётов.

  15. mif2000 26.10.2008 в 09:54

    Почаще бы сайт обновляли :)

  16. Аркадий 26.10.2008 в 20:04

    согласен с mif2000 а то часто выпадете из колеи.

  17. Интермаш 27.10.2008 в 16:41

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

  18. Аркадий 28.10.2008 в 11:37

    очень итересный способ

  19. Тимур 05.11.2008 в 01:13

    Хе,классно,чёт раньше даже об этом до меня не доходило,просто,но ощущение создаёт!

  20. Соник 07.11.2008 в 19:17

    Вроде глупая двухмерная игрушка, а ощущение 3х мерной, спасиб

  21. Айфон 09.11.2008 в 17:14

    Спасибо за мини инструктаж, а игрушка получилась прикольная :)

  22. Мини игры 16.01.2009 в 17:04

    На самом деле можно не группировать.

  23. Павел 24.01.2009 в 16:48

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

  24. Александр 17.06.2009 в 13:48

    Все хорошо, но на санках вверх?

  25. Stormit 17.06.2009 в 13:54

    А турбины для чего?

  26. Игродел: делаем почву « Murlyka Studio 17.07.2009 в 21:46

    […] 2) Рисуем основу блоков. Подробней у Хитри […]

  27. Caleb 16.12.2009 в 11:29

    Я сейчас пишу свой движок под РПГ изометрическую. Сначала писал с кучей вычислений математических. Потом вспомнил про этот метод и понял что торможу. Повернуть же построенное поле можно поместив его внутрь другого мувика и потом этот внешний мувик сжать. Получится, что координаты каждого тайла на поле будут локальные, без заморочек математических, а вид изометрический. Спасибо Stormit.
    Вот код. В библиотеку добавляем следующие мувики: pustoy (просто пустой мувик для всяких нужд. Можно конечно использовать createEmptyMovieClip, но мне как то кажется нагляднее что ли для примера) и tiles в котором добавляем квадратные тайлы, на свой вкус, в одном кадре один тайл. У меня в массиве карты три вида тайлов.
    map=
    [
    [3,2,1,3,2,2,2],
    [2,2,2,2,2,2,2],
    [2,2,2,3,2,3,2],
    [2,3,3,2,1,2,2],
    [2,3,2,2,3,2,2],
    [2,2,2,2,1,2,2],
    [2,2,2,3,2,2,3]
    ]

    dlinakarty=map[0].length;
    visotakarty=map.length;
    ztile=3;

    attachMovie(”pustoy”,”mir”,1,{_x:0,_y:0});
    mir.attachMovie(”pustoy”,”pole”,2,{_x:0,_y:0});
    for (ky=0;ky<visotakarty;ky++) {
    for (kx=0;kx<dlinakarty;kx++) {
    ntile=”tiley”+ky+”x”+kx;
    mir.pole.attachMovie(”tiles”,ntile,ztile);
    mir.pole[ntile]._x=kx*50;
    mir.pole[ntile]._y=ky*50;
    mir.pole[ntile].gotoAndStop(map[ky][kx]);
    ztile++;
    }
    }

    mir.pole._rotation=45;
    mir._x=300;
    mir._height=mir.pole._height/2;

    stop();

  28. DEVORON 11.02.2010 в 20:46

    а если это карта?..в векторе..можно ли также её отобразить изометрически и будет ли она смотреться нормально?(если, допустим, текст на неё ещё не нанесён..физическая)

Оставить комментарий