【HTML&CSSではじめるミニゲーム作成の基本】CSSバックグラウンドスライド式のアニメーション用png画像をInkscapeで作成する
※ 当ページには【広告/PR】を含む場合があります。
2021/05/24
2024/01/12
簡単なCSSパラパラアニメーション
<div id="css-game-wrapper">
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
</div>
#css-game-wrapper {
width: 100%;
height: 140px;
background-color: darkgray;
box-sizing: border-box;
position: relative;
}
.ball {
display: block;
position: absolute;
width: 120px;
height: 120px;
overflow: hidden;
background: transparent url("https://raw.githubusercontent.com/tacoskingdom/commonBlogMaterial/main/tacokin-p-school/blog41/article41-example1.png") no-repeat 0 0;
}
#ball-1 {
left: 0px;
top: 0px;
animation: bouncing-ball 0.5s steps(6) 0s infinite;
}
#ball-2 {
left: 120px;
top: 0px;
animation: bouncing-ball 1.5s steps(6) 0s infinite;
}
#ball-3 {
left: 240px;
top: 0px;
animation: bouncing-ball 3s steps(6) 0s infinite;
}
@keyframes bouncing-ball {
to {
background-position: -735px 0;
}
}
Inkscapeでベクター画像のパラパラアニメを作る
ガイドを作る
パターンフィル
168 x 368 [px]
パターン
[オブジェクト] > [パターン] > [オブジェクトをパターンに]
pattern****368x100=36800[px][パターン]
フレームごとのアニメーション作成
曲線の作成
位置の調整
ベクター画像をコピペできる利点
png画像へのエクスポート
[フィル/ストローク]不透明度
[PNG画像にエクスポート]選択範囲
選択されていないものは出力しないCSSアニメーションの実行
<div id="css-game-wrapper">
<div class="box-game" id="box">
<label for='checkbox'></label>
<input type='checkbox' id='checkbox'>
<div class="box-game-inner"></div>
</div>
</div>
#css-game-wrapper {
width: 100%;
height: 300px;
background-color: darkgray;
box-sizing: border-box;
position: relative;
}
#css-game-wrapper .box-game {
position: absolute;
width: 96px;
height: 192px;
overflow: hidden;
}
#css-game-wrapper .box-game label {
display: block;
position: absolute;
bottom: 0px;
left: 1px;
width: 94px;
height: 63px;
z-index: 1;
}
#css-game-wrapper .box-game input {
display: none;
}
#css-game-wrapper #box {
display: block;
left: 50px;
bottom: 12px;
}
#css-game-wrapper #box .box-game-inner {
position: absolute;
display: block;
width: 96px;
height: 192px;
overflow: hidden;
background: transparent url("https://raw.githubusercontent.com/tacoskingdom/commonBlogMaterial/main/tacokin-p-school/blog41/tacoani_m.png") no-repeat 0 0;
background-size: auto;
background-size: 96px 13056px;
}
#css-game-wrapper #box #checkbox:checked ~ .box-game-inner {
animation: sprite-taco 9s steps(67) 0s forwards;
}
@keyframes sprite-taco {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -12864px;
}
}
まとめ
参考サイト
その他のリンク記事
関連記事
【Scratch入門】SVG画像のviewportの意味とviewBox属性の使い方
2021/02/14
ID#:47
Scratch 基礎 SVG
【Scratch入門】SVG画像のviewportの意味とviewBox属性の使い方
Scratchアプリで欠かせないSVG画像の重要なビューポート(viewport)とビューボックス(viewBox)の概念と使い方を解説します。
クリックするとリンク先へ飛びます関連記事
Scratchから始めるシューティングゲームの作り方⑤〜長い背景の作り方と敵の出現パターンを設定する
2022/08/15
ID#:99
Scratch シューティングゲーム 背景
Scratchから始めるシューティングゲームの作り方⑤〜長い背景の作り方と敵の出現パターンを設定する
Scratchによるシューティングゲーム作成のコーナーです。今回は横に大きい画像からステージ背景を作る方法と、敵の出現ポイントの設定を解説します。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー