CHARAT製アバターに動き(アニメーション)を付けたくて…素人でも実装させられる方法を無駄に語ります。

2017年9月10日

どうも。

またしても無駄に前回更新から、期間が空いてしまい「ブログってどうやって記事書くんだっけ」という状態におちいっております。

徐々に慣れていこうと思いますので、文章のテンションが途中から変わっても気にしないでいただければ幸いです。

さて、記事タイトルを見てお気付きの方も多いとは思いますが、今回はパチンコ・パチスロに全く関係ありません。

更新期間が空いてしまった、2週間強、僕がシコシコと何をやっていたのかを語らせていただこうと思います。

…いや、ブログの方向性が変わったわけではありませんので。今回だけ、一回だけですので。ちょっとだけだから。

アバターに動きを実装させたくて…

まず、CHARATとは?

…ということで、今回だけ(複数記事に渡ると思いますが)普段はパチ・スロブログですがアバター関連について深く掘り下げていきたいと思います。

最近ではSNSやブログの流行により、自分でアバターメーカー(アプリやらサイトやら)を使って作成し、そのキャラクターをアイコン画像やイメージキャラクターとして使用されている方も多いです。

絵に自信の無い人でも、自分好みの可愛いorイケメンキャラを簡単に作れるわけですね。

中でもCHARATさんでは、僕が知る中で数少ない全身描写であることと、絵のタッチが好みであった為当ブログでも使用させていただいております。

この記事で実装及びCHARATさんの紹介をしていますのでよろしければ…。

→適正パチスロ~をより楽しんでいただけるよう、変更点を色々説明します。

愛着が湧いてくると…

こっからおっさんが気持ち悪い話をしますので注意w

最初の内は正直、「なんでこんなキャラ作ったんだろう…?名前まで付けて気持ち悪い…。看板娘ってダサすぎワロタ…。」と上の記事の更新から三日目ぐらいには削除しようかとも思っていました。

いわゆる惰性で放置していたわけですけれども…。

ですが、段々月日が経つに連れ愛着が湧いてきましてもっとうちの娘に活躍の場を与えてあげたいと思ってきたわけであります。

この記事を上げるまでは、記事下でひっそりと、読者さまにお礼を言ってもらっていただけですので…。

もっとイメージキャラらしく、「このブログをリアナ嬢で埋め尽くしたい」となってしまったのです!(迫真)

CHARAT唯一の欠点

そこで浮き彫りになってしまったのが、CHARAT唯一の欠点である、「アクションが付けられない」ということ。

別に、僕はソフトクリームこぼして「ベチャベチャになっちゃったよぅ…」とか水道の蛇口から水を直飲みさせて良からぬ妄想をしながら「デュフフwww」としたいわけではありません。

この記事(ブログタイトル変更とかお詫びとか色々…)でも語っていたのですが「ページトップボタンとして使用出来ないか?」と常々思っていましたので「手を振る」だとか「看板を持つ」とかそういったことが出来れば良かったんです。

すごいくだらない話かもしれませんが…アバターに対する愛着が強いあなたには、理解してもらえると信じております。

クオリティはこんな感じです

少し前フリが長くなってしまいましたが、先にどれぐらいのものが”素人でも作成出来るのか?”を御覧いただきましょう。

「こんなクオリティならいらねぇよ」と言われればそれまでですが、「この程度で良いから実装させてみたい」と思っていただければ、この先読み進めてもらえればほぼほぼ実装出来るかと思います。

 

 まぁ、ヘッダー部分やページトップボタンにすでに使用していますんで改めて拡大版をという感じですが。ホバーorタップで静止します。(この実装方法も最後におまけ程度に…Wordpressブログへの実装限定になりますけども)

実際の(ページ下部の)ページトップボタンはホバーorタップで手を振るアクションに切り替わりますのでヒマな方はどうぞ遊んでみてくださいw

一応コレが完成形1個前の段階でしたかね?CSS(わからない方はスルー推奨)のみでのアニメーションですので静止したままの方もいるかと思います。

お使いの端末のブラウザが古いものだと、対応していないそうで…(対応させることも可能ですが常駐するページトップボタンなので悩みまして、よく考えたらあまり古いブラウザを使用している層はこんなブログは見ませんかね、との考えで非対応のまま。)

僕の4年以上前のスマホでも、デフォ(初期設定)のブラウザでは動作しませんw

ですが、ストアから別の最新verのブラウザ(僕の場合はChrome)をインストールすれば問題なく動作していますので一度お試しください。

まぁ服が違いますよね。

服も似せたのがこっちですね。(今度は静止画)

少し手を広げて、首を傾けています。正直可愛い。(親バカ的な)

実装方法と今後について

あまり長くなりすぎるとダレますので(主に僕が)刻みますが、今回は「こんなん出来るよ!」っと言ったニュアンスでした。

素人クオリティからは抜け出せませんでしたが、ブログで使用する分には支障は無いかと個人的には思っております。

「どうやってんだ?」っとなっていただけたらニヤニヤ出来るのですがいかがでしょうか?

これらは全てCHARATさんで作成したアバターを参考に僕自身で改めて書いたものです。

こう書くと、「絵がうまくないと無理なの?」と思われてしまいそうですが僕はなんの才能も持ち合わせていません。

ちなみにこれは過去に演出を解説した際のイラスト↓

(元ネタを知らない方はグーグル先生にお聞きしましょう!→海物語 7図柄-Google検索結果

…はい、僕の作品では無く完全にCHARATさんあってのものですね。

とりあえず必要なものは、

  • まずどっかで作ったアバター(この記事をここまで見ている場合お持ちの場合が多いでしょうが…)
  • 適当なパソコンとInkscapeというフリーソフト
  • とりあえずInkscapeに慣れる時間
  • 根気とアバターへの強い愛情
  • 家族や周囲の軽蔑の眼差しに耐えうる精神力w

追々全て解説していきますが、これらを揃えられる場合は実装出来るかと思います。

パソコンとInkscapeを駆使して「写し絵」の要領で描いていくわけですね、だから簡単なんですね、素人でも出来ちゃうんですね。(棒)…慣れるまで時間掛かります。

一連の流れで(PCがすでにあれば)一円もお金は掛かりませんし、この解説をしても僕も一円も得をしませんwただアバターを動かしたいという強い願望を持っている、けれども絵の書けない、そんな同士がいれば参考程度にと記事を作成しております。

Inkscapeの解説については、まだ僕も使いこなしていませんし割愛させていただきます。今後の記事ではキャラ作成にフォーカスした解説をしていきます。

ダウンロード方法や基本的な用語はこちらの『Inkscaper ~Inkscapeの使い方』さんを参考にしていただけたらと思います。(全て投げますw)

長くなりそうですがテンポ良く解説していき、元のパチ・スロブログに戻りますのでもう少々お待ちください。

動き実装の際の注意点

一個だけ大事なことなので、先に言わせていただきます。

注意点として今回改めて自分自身でキャラクターを書き上げていくわけですが、著作権云々に関してはCHARATさんに帰属するものと思われます。

つまりどういうことかと言いますと、今まで通り個人利用(アイコン・ブログで使用)の範囲であれば問題無いんですが「自分が書いたんだから良いだろ!」と商用利用(スタンプ・グッズ等の販売など)に切り替えてしまうと使用料をCHARATさんに支払う必要性が出てきます。

そのことに関しては、CHARATさん利用規約に明記されておりましたことを記憶しております。雑ですが…

ここで作成したアバターの著作権はうちのものです。どれだけ編集加えてもうちのもんです。商用利用の際はご一報。

CHARATさん利用規約より(原文では無いw)

無用なトラブルは避けるために商用での利用は控えていただくこと、またどうしても商用利用に転換したい場合には必ずCHARATさんへご一報していただくことをお守りください。

正しく使用しないと、他のユーザーさんにも迷惑が掛かりかねないということを意識しましょう、僕も注意します。

それでは次回より、早速取り掛かります。