<script src="/files/spine-player/4.2/spine-player.js"></script>
<link rel="stylesheet" href="/files/spine-player/4.2/spine-player.css">
<div class="units-row-end">		
	<div class="unit-100">
		<div class="examples-header">
			<div class="units-row">
				<div class="unit-60">
					<div id="player"></div>
				</div>
				<div class="unit-40">
					<div class="examples-header-info">
						<div class="examples-header-info-tags">
							<span>タグ:</span>
							<p>Professional、メッシュ、IKコンストレイント、トランスフォーム・コンストレイント、ウェイト、スキン</p>
						</div>
						<div class="examples-header-download">[example-download:chibi-stickers]</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
	jsonUrl: "/files/examples/4.2/chibi-stickers/export/chibi-stickers.json",
	atlasUrl: "/files/examples/4.2/chibi-stickers/export/chibi-stickers.atlas",
	premultipliedAlpha: false,
	animation: "emotes/hooray",
	skin: "spineboy",
	viewport: { 
		width: 1170,
		height: 1090
	},
	backgroundColor: "#555555FF",
	fullScreenBackgroundColor: "#555555FF"
});
</script>

!!

#Chibi Stickers(ちびステッカー)

Chibi Stickersプロジェクトでは、Spine Professionalで複数のスキンを使用しながらステッカー用のエモートを作成する方法を紹介しています。

##スキン
このプロジェクトにはたくさんの[スキン](/spine-skins)があります。それには、Spineboyに始まり、Esoteric Softwareチームのメンバーのスキンも含まれています！

<img style="max-width:100%" class="no-borders" src="/files/blog/4.1-released/all-waving.png">!!

これらのスキンは配信の後で追加され、各スキン独自のパーツについては新しくメッシュを作成したりウェイト付けをしたりしていますが、Spineboyの元々のパーツの一部の色を変えたり、腕や足などに[リンクメッシュ](/spine-meshes#リンクメッシュ)を使用したりもしています。

いくつかのスキンは[スキンボーン]を含んでいます。これらはスカートのコントロールや後ろ髪など一部のパーツをアニメーションするために使用されています。すべてのスキンがそれらのパーツを使うわけではないので、スキンボーンを使うということはそれらのパーツを使用していないスキンにはそれらのボーンは表示されず、その分の計算も行われないということです。

これらのキャラクターにはエモートシンボルや口、目の差分など共通のアイテムもあります。これらは[スキンプレースホルダー](/spine-skins#スキンプレースホルダー)の中には入っていないので、どのスキンがアクティブになっているかに関わらずいつでも使用することができます。

##顔のコントロール

このプロジェクトでは、ボーン`face-holder`を動かすことで顔の奥行きのシミュレーションができます。

この奥行きはトランスフォーム・コンストレイントを使用して、ボーン`head-inverse`から`face-holder`へ、トランスレートのミックスをX`-100`とY`-100`で制約することによって実現しています。これにより`head-inverse`はボーン`face-holder`のトランスレートを反映しますが、しかし反対方向に動くようになります。いくつかのメッシュは両方のボーンに異なる量のウェイト付けがされており、これにより奥行きのイリュージョンをもたらしてくれる視差を生み出すことを可能にしています。

少し異なりますが、ただ似たようなセットアップを別のプロジェクト例:[Mix-and-Match](/spine-examples-mix-and-match#顔のコントロール)でも見ることができます。

![headturn](/img/spine-examples/chibi-stickers/spineboy-headturn.png)

##曲げやすい手足

腕や足、体など全体的に非常にシンプルな横方向の湾曲ができるようになっています。手足を構成する画像は、Spineで綺麗に曲げられるように、あえて最初から真っ直ぐに描かれています。

<img style="max-width:100%" class="no-borders" src="/img/spine-examples/chibi-stickers/bendy-limb.png">!!

また、足には[IKコンストレイント](/spine-ik-constraints)を使用しており、体の動きに追従しながらも地面に固定された状態を保つことができるようになっています。

##髪

多くの場合、髪の毛は「前髪」、「真ん中の髪」、「後ろ髪」の大きく3つに分かれます。

このプロジェクトでは、スキンごとに異なるヘアスタイルが用意されています。そのため、1つまたは複数のヘアスタイルを制御するために、いくつかの余分なボーンが必要です。これらのボーンは[スキンボーン](/spine-skins#スキンボーン)としてスキンに追加されています。`hair-front`頭の真ん中から上に向かって伸びる髪を、`hair-back-long-middle`と`hair-back-long-middle-down`は下に降りている長い髪の毛をコントロールします。

ボーン`hair-back-long-middle`の回転の継承は無効になっており、これによってパーツが重力によって回転が固定されているかのように見せています。※髪が跳ねたり動作に追従したりする動きは依然として作る必要があります。

##髭

ヒゲは、各バージョンで顔の丸みに沿って生えています。それぞれのヒゲは、頭の境界線に接する外側は`head-base`に、内側は`face-holder`に完全にウェイト付けされています。メッシュはできるだけ少ない頂点を使い、左右対称になるように構成され、 場合によってはより丸みを帯びるようにウェイトのある頂点の2列目が存在することもあります。

![beards](/img/spine-examples/chibi-stickers/beards.png)


##眼鏡

<img style="max-width:100%" class="no-borders" src="/img/spine-examples/chibi-stickers/glasses-parts.png">!!

メガネは、レンズと両サイドの3つのパーツで構成されています。前面は頭部のコントロールボーンにウェイト付されていますが、両サイドは一端がメガネにくっつき、もう一端が耳の上に行くように手動で位置決めしてウェイトが設定されています。このウェイト設定には、テスト用の振り向きアニメーションを使用しました。

![glasses](/img/spine-examples/chibi-stickers/glasses.png)


##スカート

![glasses](/img/spine-examples/chibi-stickers/skirt-weights.png)

このスカートのコントロールは別のプロジェクト例：[Mix-and-Match](/spine-examples-mix-and-match#緑のドレス)と同じ理論に従いました。

##帽子


<img style="max-width:100%" class="no-borders" src="/img/spine-examples/chibi-stickers/hat.png">!!

帽子は、上部、前部、後部の3つの主要な部分から構成されています。この構造は、アニメーションのために帽子を分離する方法の良い例です。表示順序で後部は後ろ髪の後ろに、前部は顔と髪の前に置きます。この2つは同じ画像ですが、メッシュの中央下部の4点でボーン`face-holder`と`head-inverse`に対するウェイトの差をつけることで差別化しています。

##エモート

<img style="max-width:100%" class="no-borders" src="/img/blog/tutorial-stickers/chibi-stickers-spineboy-wave.png">!!

このプロジェクトには、さまざまな例のために23のエモートアニメーションが含まれています。これらはすべて、ステッカーとしてエクスポートするのに最適なように、特定の感情を表現するポーズから始まる短いループです。

新しいエモートを作成するには、まず新規アニメーションを作成してください。次にキャラクターにそのエモーションを最もよく表現する静止ポーズを取らせてください。この時点で、アニメーションの最初と最後が同じポーズになるように複製します。アニメーションの長さが、目的のエクスポートに許容される長さ（通常は最大1〜2秒）を超えないように注意してください。FPSがデフォルトの30に設定されている場合は、エディターで60フレームを超えないようにするのが良いですが、アニメーション`idea`では全体の長さが90フレームになっているように、このルールの通りではないこともあります。次に、ポーズのバリエーションを真ん中に追加して、オフセットとカーブを調整します。

![preview of the set](/img/blog/tutorial-stickers/spineboy-preview-telegram.gif)

##動き

また、このプロジェクトにはちょっとしたおまけとして、前、後ろ、左、右方向の待機(idle)アニメーションと小走り(trot)アニメーションも含まれています。各スキンには1つのフロントセットしかなく、ボディは回転しないので、結果はすべてのスキンに対して完璧ではありませんが、これらを使ってゲーム内で4方向の動きをテストするには十分でしょう。

<img style="max-width:100%" class="no-borders" src="/img/spine-examples/chibi-stickers/erika-trot.png">!!


## ステッカーをエクスポートする

弊社の[ブログ](/blog/How-to-create-your-own-Telegram-and-Discord-stickers)にて、TelegramとDiscordステッカーをエクスポートするために必要な手順を説明した詳細な記事が公開されています。

## ビデオ

このプロジェクトの制作の様子は、以下のビデオでご覧いただけます。また、[Spine Twitchアーカイブ](/spine-twitch.php)では、配信とプロジェクトファイルの完全なインデックスを見ることができます。

このページからダウンロードできるプロジェクトファイル、またはSpineのサンプル一覧から開くことができるプロジェクトファイルは、Twitchストリームのプロジェクトファイルよりも多くのスキンやアニメーションを提供している拡張版になっています。

[youtube:im--6r3syGo]

<div class="toc-home"><p><a href="/spine-examples">Spineプロジェクト例</a></p></div>