Изометрия в два счёта
17.10.2008, автор Stormit, рубрики: Flash игры, Анимация, Игровые баннерыДля flash-игры TilePaving использовалась одна маленькая, но полезная хитрость. Никакой изометрии в программном понимании там и в помине нет. Все расчёты для плиток производятся в привычных координатах _x и _y. А интересный ракурс создаётся благодаря двум простым действиям: повернуть символ на 45 градусов (всю игру целиком), а потом сплющить её по вертикали на 50%. Сжать повёрнутый символ во флэше не так-то просто - маркеры трансформации помнят угол поворота и сохраняют возможность растяжения/сжатия по осям самого клипа. Чтобы обойти этот момент, нужно символ временно сгруппировать (Ctrl + g), сжать по высоте и затем разгруппировать (Ctrl + b).
Есть конечно и неприятный момент: если символы внутри игры должны сохранить свою “вертикальность”, прийдётся каждый “восстанавливать” вручную. То же самое касается текстов и анимации.
Иногда очень хочется сделать flash-игрушку или заставку в необычном ракурсе, но возиться с тригонометрией не всегда хочется. Гораздо удобнее, когда всё просто и наглядно. Сразу видишь, как это выглядит и что нужно поменять.
В любом случае можно иметь ввиду такой способ.
Есть случаи ещё проще. В примере ниже символ, в котором препятствия и дети движутся строго по осям, повёрнут на небольшой угол. Дети на санках, нарисованные в соответствующей проекции, усиливают эффект.
Получается некий отход от стандартного. Просто, а результат может стать в разы лучше.
Интересно на 50%
То есть получается что дети и препятствия двигаются строго по оси _x, а эффект наклонной плоскости вызван тем что родительский клип, в котором они размещены, чуть-чуть повернут против часовой стрелки, плюс к этому подходящая проекция графики? Если так то довольно просто и гениально
Именно так
На самом деле можно не группировать. Маркеры поворота обнулятся если снять выделение и выделить снова
А, черт, сглупил ) Это сработает для нескольких объектов, для 1 мувиклипа такое не прокатит, все верно
Для символа трансформация сохраняется (поэтому и программно есть возможность менять ширину и высоту, как бы он ни был повернут).
А группировать символ бывает полезно ещё и когда делаешь анимацию, а символу сложно придать нужную форму (ввиду того что он уже повернут). Главное не забыть разгруппировать обратно, а то потом в библиотеке появляются новые символы.
Классная штука! Заметил что, если скачать твои флешки себе на комп,то в верхнем правом углу появляется значёк Хи3 с сылкой на твой сайт - каким образом идёт проверка на местоположение ролика?
Есть свойство _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.
Точно.
if (_url.indexOf("http://domainName.com") != -1) { _visible = false; }Для меня это было новостью, спасибо за интересный материал.
Подскажите пожалуйста, можно ли во Флэше динамически распределять глубину для объектов? Обычно в изометрических игрушках для движущихся объектов в качестве показателя глубины я использовал значение координаты Y, то есть чем ниже был расположен объект, тем ближе он был к камере, условно говоря. Но в Флеш несколько странное представление глубин (в моём понимании странное), тут ведь рисовать несколько объектов на одной глубине нельзя. В AC3, насколько мне известно, в этом отношении ситуация усложнилась ещё больше.
Может быть вам известно решение сей проблемы малой кровью? )
http://armorgames.com/files/games/boxhead-more-rooms-173.swf
Полагаю, создатели данной игры нашли его )
Нужно смотреть по ситуации
Для этого примера по ссылке можно каждому объекту присвоить уникальный номер с шагом 1, тогда если их всего 100 штук:
objectNum = (0-100);//от 0 до 100
totalNum = 100;
level = Math.floor(_y) * totalNum + objectNum;
Чудесный способ, спасибо )
Можно упихать все объекты в массив и упорядочить по _y. Номер в массиве и будет нужной глубиной.
На практике не проверял, но должно тормозить
Тоже интересный вариант, спасибо )
Однако в моей ситуации кол-во объектов как раз заранее определено, так что способ, предложенный Stormit, подходит идеально и не требует никаких дополнительных расчётов.
Почаще бы сайт обновляли
согласен с mif2000 а то часто выпадете из колеи.
Симпатишный у вас блог, очень люблю салатовый цвет, да и тема интересная.
очень итересный способ
Хе,классно,чёт раньше даже об этом до меня не доходило,просто,но ощущение создаёт!
Вроде глупая двухмерная игрушка, а ощущение 3х мерной, спасиб
Спасибо за мини инструктаж, а игрушка получилась прикольная
На самом деле можно не группировать.
увлекательная но, простите, однообразна. через минуту уже не хочется играть но респект!
Все хорошо, но на санках вверх?
А турбины для чего?
[…] 2) Рисуем основу блоков. Подробней у Хитри […]
Я сейчас пишу свой движок под РПГ изометрическую. Сначала писал с кучей вычислений математических. Потом вспомнил про этот метод и понял что торможу. Повернуть же построенное поле можно поместив его внутрь другого мувика и потом этот внешний мувик сжать. Получится, что координаты каждого тайла на поле будут локальные, без заморочек математических, а вид изометрический. Спасибо 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();
а если это карта?..в векторе..можно ли также её отобразить изометрически и будет ли она смотреться нормально?(если, допустим, текст на неё ещё не нанесён..физическая)
У меня проблема такого характера: развернуть текстуру, то я разворачиваю при помощи rotation, но сплющить потом не получается. Если я укоращиваю вдвое параметр height либо width, то оно никак не сплющивает обьект, а укоращивает его вдвое. Прошу помочь.
Какими функция или методами вы пользуетесь для реализации изометрии? Если не трудно кому, то выложите исходники пж, где есть примеры.
Ну вот примерчик на скорую руку. Так сказать основа основ. Я здесь сделал тайлы искаженными вручную, то есть высота*2 и поворот -45°. Но можно делать и программно конечно, как это сделано с персонажем. Это пример того, что можно делать и так и так. Правда здесь я опустил z-сортировку для простоты. Обычно я ее делаю располагая тайлы в четных числах, а персонажа в уровень тайла - 1.
http://narod.ru/disk/19264867000/primer_iso.fla.html
Вчера пытался дать ответ с исходником, но почему то не прошло модерацию. Постараюсь ответить так, без ссылок. Когда разворачиваешь тайл на 45° и уменьшаешь в 2 раза, то естественно он становится сплющенным. Что бы этого избежать, нужно либо сразу поворачивать контент тайла на -45° и вытягивать в 2 раза, либо делать это в цикле когда добавляешь тайлы на сцену.
Большое спасибо за ответ.
Еще спасибо за исходник, в нем уже разобрался и все понятно, но вот другая проблема - как его переписать из 2 на 3 ActionScript? Та ведь совсем другие методы уже..
Да всё там то же самое, немного поменяли, да упаскалили зачем то, так сказать откатились назад ко временам не ООП языков, когда компиляторы были тупыми и всё надо было разжёвывать. http://flasher.ru/forum/showthread.php?s=cee52cbf938fd801eb517dfe811b5052&t=85645 вот это поможет перевести в ас3.
О, я разбирался немного на днях, и должен сказать, что все-таки АS2 и AS3 прилично отличаются. Насчет того, что они вернулись к времени, когда компиляторы были тупыми и всё надо было разжёвывать согласен 100%.
Все таки переделал в 3 екшн, просто вместо метода АтачМуви надо юзать ЕддЧайлд, + некоторые тонкости с настройкой обьектов в библиотеке.
Все равно спасибо за помощь.
Caleb, у меня к вам вопрос - вам удалось в своем движке реализовать скролинг карты, чтобы герой был в центре карты? Если да, то напишите пж как, потому что способ описаный в этом блоге не катит для изометрии. Если не изометрировать то работает как надо, а в изометрии нет. Помогите пж, если можете.
Просто двигвй
Просто меняй координаты мувика mir.pole в противоположную сторону герою. Естественно с учётом поворота на -45°. Допустим у тебя персонаж идёт визуально вправо, но реально то он идёт подиагонали вправовверх, поэтому поле должно двигаться влевовниз, визуально влево.