Как создать шимеджика, разбор действий

[Shimeji]

Предлагаю ещё раз разобрать тему «Как нарисовать своего шимеджика». Возьмем для примера шимеджики Squalo_01 из Katekyo Hitman Reborn и Byakuya_01 из Bleach.
Попробуем разобрать файлы в папке conf. Возьмем английскую версию из shimeji-ee, так будет проще =)
Открыть xml файл можно, используя, например, Notepad++. Или любой браузер, но он не позволит посмотреть нумерацию строк и не позволит редактировать файл. Поэтому я рекомендую использовать Notepad++
Начнем с файла actions.xml или 動作.xml. Это тот файл, который больше весит. В нем описано каким образом шимеджик выполняет различные действия, то есть какие изображения он использует для этого и каким образом эти изображения перемещаются.

Далее очень много текста и небольших изображений

Надеюсь, в формулировке я не ошиблась =).
Изображение обычного шимеджика имеет 128 пикселей в высоту и столько же в длину. Если требуется изображене другого размера, придется корректировать файл с настройками.
Несколько первых строчек выглядит так:

<action type="Stay" name="Stand" bordertype="Floor">
     <animation>
          <pose duration="250" velocity="0,0" imageanchor="64,128" image="/shime1.png"></pose>
     </animation>
</action>

Разбираться с настройкой всех этих действий не является сегодняшней задачей, если кому-нибудь интересно, можно посмотреть в прошлом посте на тему рисования, там есть ссылка на урок и туториалы с DA. Может быть, когда-нибудь разберем и их, а на сегодня пока рассмотрим какие действия выполняет и какие изображения использует простой шимеджик, с программированием которого автор не мучился =)
Некоторые моменты с программированием, однако, я постараюсь описать, если вспомню какие-нибудь интересные особенности.

Первое действие — Stand.
Использует файл shime1.png
Как понятно из названия, шимеджик здесь просто стоит.
Как это выглядит на примерах:

Скуало	Бьякуя

Бьякуя отличается тем, что у него есть отдельное изображение, когда он смотрит в правую сторону. Зовется оно shime1-r.png. Насколько я понимаю, для такого эффекта исправлять в файле настроек ничего не нужно, просто дописать к имени нужного файла -r. Если отдельного изображения для правой стороны нет, будет использоваться зеркальное изображение обычного кадра.
Кстати, полезно: если Вы хотите, чтобы шимеджик не просто стоял, а, например, моргал, то код можно изменить, добавив ему дополнительных изображений.
Для примера, Джотто из того же Реборна, чтобы далеко не ходить. Автор выбрал для изображений другие имена, но суть от этого не меняется.
Вот так выглядит его файл actions:

<動作 名前="立つ" 種類="静止" 枠="地面">
     <アニメーション>
          <ポーズ 画像="/00_0.png" 基準座標="64,128" 移動速度="0,0" 長さ="100" />
          <ポーズ 画像="/00_1.png" 基準座標="64,128" 移動速度="0,0" 長さ="4" />
          <ポーズ 画像="/00_2.png" 基準座標="64,128" 移動速度="0,0" 長さ="4" />
          <ポーズ 画像="/00_1.png" 基準座標="64,128" 移動速度="0,0" 長さ="4" />
          <ポーズ 画像="/00_0.png" 基準座標="64,128" 移動速度="0,0" 長さ="150" />
          <ポーズ 画像="/00_2.png" 基準座標="64,128" 移動速度="0,0" 長さ="4" />
          <ポーズ 画像="/00_0.png" 基準座標="64,128" 移動速度="0,0" 長さ="100" />
     

Выглядит он примерно так:

Опытным путём было установлено, что 100 в значении продолжительности примерно равно 4 секундам.
То есть, чтобы шимеджик моргал, нужно добавить ещё несколько строчек, указав порядок, используемые изображения и продолжительность их показа.

Затем, действие Walk.
Использует изображения: shime1 - shime2 - shime1 - shime3

Скуало	Бьякуя

Действие Run практически не отличается от Walk. Оно использует те же кадры, но их скорость в три раза выше (Duration="2") и изображение перемещается на 4 пикселя вместо двух при ходьбе (Velocity="-4,0")
Кстати, полезно: чтобы анимация бегущего шимеджика отличалась от анимации идущего, нужно просто прописать в этой строчке другие изображения.
Например, шимеджик Хром.
Код её действия Run выглядит так:

<動作 名前="走る" 種類="移動" 枠="地面">
     <アニメーション>
          <ポーズ 画像="/shime1.png" 基準座標="64,128" 移動速度="-4,0" 長さ="2" />
          <ポーズ 画像="/shime47.png" 基準座標="64,128" 移動速度="-4,0" 長さ="2" />
          <ポーズ 画像="/shime1.png" 基準座標="64,128" 移動速度="-4,0" 長さ="2" />
          <ポーズ 画像="/shime48.png" 基準座標="64,128" 移動速度="-4,0" 長さ="2" />
     </アニメーション>
</動作>

Здесь видно, что она использует кадры shime1 — shime47 — shime1 — shime1. Впрочем, имена не имеют особого значения, главное, чтобы в них не запутаться и правильно указать в файле настроек.
Вот как выглядит Хром идущая и Хром бегущая

Walk	Run

Прошу прощения за то, что так много Реборна. Просто эти шимеджики мне кажутся вполне симпатичными, да и с ними я уже разбиралась когда-то, уже знаю их особенности и для примера долго искать не нужно =)
За ним идет Dash. Оно тоже практически не отличается от ходьбы или бега, но перемещает шимеджик на 8 пикселей с каждым кадром. Такой немного ускоренный бег. Скорость анимации такая же, как и при беге.

Следующее действие — Sit.
Использует изображение shime11.

Скуало	Бьякуя

Как сделать так, чтобы шимеджик при этом ещё и моргал, вы уже знаете

Далее SitAndLookUp.
Использует shime26.

Скуало	Бьякуя

SitAndLookAtMouse использует тот же кадр.
Насколько я понимаю, это изображение используется, когда курсор находится в верхней половине экрана. Когда курсор находится в нижней половине экрана, используется изображение shime11 (Condition="#{mascot.environment.cursor.y < mascot.environment.screen.height/2}")
Чаще всего шимеджик использует эти кадры после клика по третьей строчке меню и команды подойти к курсору.

SitAndSpinHeadAction состоит из последовательности shime26 — shime15 — shime26 — shime16 — shime28 — shime29 — shime11 и выглядит так:

Скуало	Бьякуя

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

SitWithLegsUp и SitWithLegsDown описывают сидячего шимеджика. Используют изображения shime30 и shime31 соответственно.
SitWithLegsUp выглядит так:

Скуало	Бьякуя

А SitWithLegsDown так:

Скуало	Бьякуя

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

А вот и вышеупомянутая анимация — SitAndDangleLegs. Шимеджик сидит и болтает ногами. Конечно, можно сделать всё, что угодно, например, читающего книгу или пьющего чай.
Действие использует изображения shime31 — shime32 — shime33 — shime31 и выглядит следующим образом:

Скуало	Бьякуя

Совершив это действие несколько раз, шимеджик встает и перестаёт следить за курсором.

Затем, Sprawl. Состоит из изображения shime21.

Скуало	Бьякуя

Это изображение используется ещё в двух действиях — когда шимеджик приземляется на землю и когда он ползает.

Довольно интересное действие Creep. shime20 — shime20 — shime21 — shime21 — shime21
Кадры одни и те же, но у них разная продолжительность и расстояние, на которое шимеджик перемещается. Анимация Бьякуи выглядит так:

Я не стану делать анимацию его перемещения, но сделаю её для Скуало. Первое изображение, shime20 находится на месте и никуда не перемещается. Его длительность ~1.12сек. Изображения shime21 длятся ~0.16сек, первые два перемещают картинку на 8 пикселей, третье на четыре. (Хотя в файле написано 2 и 1, на мой взгляд, каждое значение здесь нужно увеличивать в четыре раза). Последнее изображение shime20 длится 0.96сек и также остается на месте.
Выглядит Скуало при этом примерно вот так:

Действие повторяется пока ему не надоест.

Мы закончили с действиями, происходящими на земле, теперь переходим в воздух на потолок.
GrabCeiling описывает висящего на потолке шимеджика и использует для этого shime23.

Скуало	Бьякуя

Прошу обратить внимание на то, что «потолок» находится примерно на уровне рук Скуало или Бьякуи. Часть головы при этом не видно. Не нужно рисовать руки у верхней границы изображения, думая, что этим краем оно крепится к потолку. Изображение обрезается как раз примерно на уровне нарисованных у этих шимеджиков рук. Голова становится видна тогда, когда шимеджик ползет по низу окна браузера, но при этом он цепляется за него руками, а не макушкой. Просто нарисуйте руки на том же уровне =)

ClimbCeiling. Шимеджик ползет у верхней границы экрана. shime25 — shime25 — shime23 — shime24 — shime24 — shime24 — shime23 — shime25.
Продолжительность показа изображения и расстояние, на которое при этом перемещается шимеджик можно посмотреть в файле с настройками.

Скуало	Бьякуя

А теперь стены.
Действие GrabWall — цепляющийся за стенку шимеджик.

Скуало	Бьякуя

На этом кадре у Скуало хорошо видно где находится край экрана. Здесь точно так же, как и при цепляющемся за «потолок» шимеджике, изображение обрезается, если шимеджик ползет по краю экрана и видно полностью, если он карабкается по окну браузера. Линия, на которой расположены руки шимеджика находится как раз посередине изображения.

ClimbWall это карабкающийся шимеджик. Как видно из файла настроек, это действие состоит из двух частей: когда шимеджик карабкается вверх и когда он спускается вниз. Используемые изображения: shime14 — shime14 — shime12 — shime13 — shime13 — shime13 — shime12 — shime14.

Скуало	Бьякуя

Теперь действия с окошком браузера.
Начнем с FallWithIe.
Это действие описывается кадром shime36. Оно используется для «притягивания» окошка браузера к шимеджику.

Скуало	Бьякуя

У Бьякуи хорошо видно где расположено при этом окно браузера. Для рисования этого кадра можно использовать картинки с Бьякуей в качестве основы, а можно просто выделить область под браузер самому. Угол окна при этом будет в точке (64; 64), то есть ровно по середине рисунка, если размеры изображения не менялись.

Действия WalkWithIe и RunWithIe используют одни и те же изображения, но с разной скоростью. Шимеджик бежит с окошком браузера.
Используются shime34 — shime35 — shime34 — shime36.

Скуало	Бьякуя

ThrowIe это пинок окошка браузера. Как только шимеджит отнесет это окно достаточно далеко, он его ударяет и идет по своим делам дальше.
Изображение shime37

Скуало	Бьякуя

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

Скуало	Бьякуя

Falling описывает падение персонажа. Используется при этом изображение shime4.

Скуало	Бьякуя

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

		<Action Name="Falling" Type="Embedded" Class="com.group_finity.mascot.action.Fall"
			RegistanceX="0.05" RegistanceY="0.1" Gravity="2">
			<Animation>
				<Pose Image="/shime4.png" ImageAnchor="64,128" Velocity="0,0" Duration="250" />
			</Animation>
		</Action>

Этот код расположен между 213 и 217 строками. В оригинальном файле этот кусочек выглядит так: 空気抵抗X="0.05" 空気抵抗Y="0.1" 重力="0.1". Первое значение — RegistanceX, второе — RegistanceY, третье и есть Gravity.
Там есть довольно интересный параметр Gravity="2". Если изменить его значение, то скорость, с которой персонаж падает на землю, изменится. Чем больше это значение, тем быстрее он падает. Однако, если поставить слишком маленькое значение, можно просто не дождаться, пока шимеджик появится в пределах видимости =) Не думаю, что стоит использовать меньше 0.5, хотя я ради эксперимента выставляла и 0.01. Получилась такая пушинка, которая довольно больно ударяется о землю даже при такой небольшой скорости падения.
Остальные два параметра влияют на расстояние, которое пролетает шимеджик, если его бросить вверх или в сторону. Больше 1 эти параметры ставить не рекомендую, значение больше 1 по y вообще привело к тому, что падения шимеджика я не дождалась.

Bouncing это приземление шимеджика на землю. Изображения: shime18 — shime19. Затем шимеджик встает, используется изображение shime1.

Скуало	Бьякуя

Tripping это отлетающий в сторону шимеджик. Когда он делится, в одном из вариантов этого деления, одна копия использует эту анимацию и отлетает в сторону, а вторая падает сверху. shime19 — shime18 — shime20 — shime20 — shime19.
Я приведу здесь только анимацию Скуало, поскольку боюсь, что копание в файлах настроек, создание анимаций и написание этого поста, занявшее у меня уже, страшно представить, около 7 часов, не считая перерывов на сон и еду, скоро сведут меня с ума.

Последний кадр, shime19, насколько я понимаю, описывает сам полет шимеджика по дуге. Поэтому тут он отсутствует, чтобы не путаться.
Кстати, параметр Gravity, используемый в действии Falling, здесь также влияет на скорость падения копии шимеджика.

Resisting это поведение шимеджика, когда его дежит курсор. Сначала он спокойно виси, затем начинает дергаться, останавливается, опять дергается и в итоге падает.
Это действие использует чередование кадров shime6, shime5 и shime1. Если у вас отдельное изображение для висящего на курсоре шимеджика, shime1 следует заменить на нужное имя.
В этом действии нет ничего сложного, советую просто подержать любого шимеджика, через несколько секунд он покажет эту анимацию =)

Почти закончили =)
Через несколько строчек кода можно найти описание действия можно найти описание действия PullUpShimeji1, состоящее из кадров shime1 — shime38 — shime39 — shime40 — shime41.

Затем одна из копий шимеджика использует анимацию Tripping.

Divide1 это ещё одно деление шимеджика, использующее изображения shime42 — shime43 — shime44 — shime45 — shime46.


Небольшой бонус тем, кто был с нам до конца:
Многие интересуются как сделать так, чтобы шимеджик не создавал свои копии, которые могут повесить систему, если их становится слишком много, а машина слабая. Давайте разберемся.
На этот раз нам потребуется файл behaviors.xml. Откройте его для редактирования и найдите описание действия SplitIntoTwo или 分裂する, если версия японская. Этот действие находится в 58 строке. В этой строке также есть параметр 頻度="10" или Frequency="50" (почему-то в оригинале и в переведенной версии значения отличаются). Этот параметр отвечает за частоту совершения действия. Чем больше значение, тем чаще шимеджик будет совершать данное действие. Если установить значение, равное 0, то шимеджик не будет самостоятельно его использовать. То есть, если вы хотите, чтобы шимеджик размножался чаще, нужно установить значение немного больше, а если хотите, чтобы он вообще не создавал своих копий, нужно установить значение, равное нулю.
На самом деле, количество копий одного шимеджика ограничено. Где это настраивается, я уже не помню, просто читала, что больше 25 копий, если память мне не изменяет, шимеджик самостоятельно не создает. Возможно, более изящным решением было бы ограничение числа его копий в этой настройке, но её ещё найти надо.
Добавлено:
Пишет  Shimeji:

24.08.2012 в 08:17

хм, есть у него там ещё одно действие. 引っこ抜く, которое, похоже, как раз у меня и сработало сейчас. Его тоже занулить нужно. Попытка поставить 1000 у этих действий поочередно привела к тому, что начался быстрый процесс размножения... до 10 штук сначала одним способом, а затем вторым, что доказывает правильность найденного параметра. Теперь мне понятно, где была ошибка в первом эксперименте. Максимальное количество копий ограничено, похоже, как раз 10 штуками. Об ограничении я знала, но почему-то вбила себе в голову, что их может быть до 20. То есть, я спокойно сделала копий по максимуму, конечно, больше они не размножались.
Получается, 0 нужно поставить у действия 引っこ抜く и 分裂する, то есть у обоих, где есть строчка 条件="#{mascot.totalCount < 10}" (кажется, вот и ограничение нашлось. Попытка поставить 20 вместо 10 в одной строчке привела к тому, что шимеджиков вместо 10 стало 22. 22, а не 20, видимо, из-за быстрой скорости размножения. То есть, теоретически можно поставить в обоих строчках 1 (только в одной не пойдет, проверено) и будет максимум 1 копия. Либо 0 у обоих вероятностей.)

URL комментария

И в завершение, если после прочтения всего этого текста вопрос «Как создать своего шимеджика» так и остался не ясен: чтобы создать своего персонажа, вам нужно заменить изображения какого-либо шимеджика на свои. Действия, которые этот шимеджик совершает и какие изображения он при этом использует, мы описали, как настроить его поведение, если потребуется, тоже. Остальное — дело фантазии и терпения. Если останутся какие-нибудь вопросы, — задавайте, попробуем разобраться вместе =)

Вопрос: Помогло?

1. Да :)		58	(53.7%)
2. Нет :(		3	(2.78%)
3. Ниасилил :|		47	(43.52%)
Всего:		108 Всего проголосовало: 103

@темы: Shimeji, Вопросы и ответы, Как сделать шимеджика

Comments

[Гость]

А что если у меня есть анимации но они не используются((

[Гость]

Т.К. тут много подобных вопросов говорю:
Чтобы изменить размер картинки нужно менять параметр "ImageAnchor" ВЕЗДЕ в файле actions.xml!
При этом размер самого шимеджика так-же изменится!
НИ В КОЕМ СЛУЧАЕ НЕ ДЕЛАЙТЕ БОЛЬШЕ 200-230 ПИКСЕЛЕЙ!

[Гость]

[Гость]

[J]&lt;span class=&quot;offtop&quot;&gt;&lt;s&gt;«»&lt;/s&gt;&lt;/span&gt;[/J]

[Гость]

А никто никогда не озадачивался созданием ещё одного действия с условного нуля?
Или все просто смотрели поверхностно.
Просто было бы интересно почитать, насколько это реально и насколько глубоко в код придётся копать.
/сам являюсь программистом-студентом, но ни с языком java ни с xml не работал вплотную./

[Гость]

амонг ас

[Гость]

[Гость]

[Гость]

Happy tree friends

[Гость]

Когда-нибудь я создам симеджика, но не сегодня. Потому что я ленивая жопа

[Гость]

если честно ничего не понял, попытаюсь понять:/