見出し画像

開発紀其之壱(SpineとWordPress)

Spineでつくったのを、JSONにしてウェブページで読み込んで再生する。

画面収録 2021-09-13 18.09.43

できました。背景レイヤとか開発前のいろいろなものが見えちゃってますが、心の目で感じてください。

画像2

note.comに動画は貼れないので、GIFアニメに書き出したものを貼っておきますが、上図のようなパーツが元です。

Spine Web Playerをセットすれば簡単に動かすことができます。

今日のところはここまで。(ワクチン打ってきたので)

ソースコードは以下。

<!doctype html>
<html><head>
	<meta charset="utf-8">
	<script src="//esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
	<link rel="stylesheet" href="//esotericsoftware.com/files/spine-player/4.0/spine-player.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>開発2021.09.13</title>
</head>

<style>
	body {
		background: white;
		margin: 0px;
	}
</style>

<body>
	<div id="player-container" style="width:100%; height:100vh;"></div>
</body>
<script>
	new spine.SpinePlayer("player-container" , {
		jsonUrl: "./test_v01/test.json",
		atlasUrl: "./test_v01/test.atlas",
		showControls: false,
		animation:"animation",
		backgroundColor: "#ffffff",
	});
</script>
</body>

</html>

これをWordPressの固定ページに埋め込めるようにしたいので、あれこれ考えていきたんですけど、なんか良い方法ないですかね…。

jsonとpngをセットでアップするので、諦めてftpかなぁ…。


この記事が気に入ったらサポートをしてみませんか?