福岡県筑後市のホームページ制作会社

株式会社はねオンライン

イラスト制作

Live2D超入門~移動編~           

2017年12月30日

単純な移動・回転・拡大縮小の範囲内でLive2Dアニメーションを作りたい、という方に向けた「超入門簡易版チュートリアル」、
初回は超単純!移動編です。
フレームイン→移動→フレームアウトするはねぷーのアニメーションを作ってみます。
Live2D入門

レイヤーを調整したPSDファイルを準備

下準備として、psdファイルを準備します。今回動きがあるのは1か所のみなので、レイヤーは背景とはねぷー(動く部分)の2枚だけです。

Live2D Modelerでの作業

次は本番です。Live2DModelerを起動、「FREE版として起動」を選択します。
「ファイル」→「psdファイルインポート」から先ほど準備したpsdファイルを選択(またはファイルをキャンバス部分にドラックアンドドロップ)
psdファイルが読み込まれこのような画面になります。
Live2D入門
なんだか色々設定値がありますね。
しかし初心者にはなんのことだか分からないので、「OK」で先行っちゃいましょう。

キャンバスにpsdファイルで保存した状態の画像が表示されます。

左上のパーツタブからもPSDがインポートされているのが分かります。
PSDを展開するとレイヤー単位で分けられたオブジェクトが格納されています。
Live2D入門

今回動かすのは「はねぷー」のみなので、さっそく「はねぷー」オブジェクトを選択しましょう。
Live2D入門

フレームイン→フレームアウトの流れを作りたいので、はねぷーをフレーム外へ移動させます。
十字キーが表示されている状態で、shiftを押しながらドラッグすると水平に移動します。
Live2D入門
これがアニメーションの最初の状態になります。

次にはねぷーオブジェクトにパラメータを設定します。
デフォルトのパラメータ名だと後から混乱しそうなので、パラメータ名を書き換えておきましょう
Live2D入門
「パラメータ設定」を選択

Live2D入門
「角度」を選択し「編集」

Live2D入門
任意のパラメータ名と数値を設定することができます。2点の動きの場合、0→1などの数値が分かりやすいと思います。

準備が出来たらオブジェクトにパラメータを付加しましょう。
パラメータが「0」の時に画面の右側から移動をはじめ、「1」の時に左側まで移動を終える、という風に設定します。

「はねぷー」を選択した状態でパラメータタブの[移動]ボタンをクリック
Live2D入門
今回は右から左という2点の動きなので、[2点挿入]をクリック。
Live2D入門
先ほど設定した0、1という数値が挿入されました。「OK」をクリック。

Live2D入門
2点を挿入したので、両端に二つの丸が表示されました。

左端の丸を選択すると0.00という値が、右端の丸を選択すると1.00という値が表示されます。

「1」の時点で、はねぷーを左端に移動させたいので、右端の丸を選択した状態(淵が赤くなります)キャンバスのオブジェクトを移動させます。
Live2D入門

移動パラメータの丸をドラッグで左右に動かしてみましょう。
キャンバスのオブジェクトがどのように移動するのか確認できます。
Live2D入門

これでLive2D Modelerの作業は終了です。
「ファイル」→「保存」で拡張子cmoxのファイルを保存します。

Live2D Animaterでの作業

Live2D Continue reading

続きを読む...

初めてのLive2D~1枚の絵が動き出す!次世代のグラフィックソフトウェア~

2017年12月5日

「自作のイラストを動かしてアニメーションを作りたい…でも何枚も絵を描く時間はない…」
そんなわがままな夢をかなえてくれるのがLive2Dというグラフィックソフトウェアです。
たった一枚のイラストから2Dアニメーションを作りだすことが出来るLive2Dはまさに夢の技術。近年幅広い分野で活用されています。
はねオンラインでは、スマートフォンアプリ「ひらがなの種」を開発するにあたって、このLive2Dの技術を使ってアニメーションを制作しました。

アプリ開発に携わる前の私には、photoshopを使った単純なgifアニメーション制作経験しかありませんでした。
そこで公式サイトのチュートリアルで一からLive2D操作を学ぶことに。
とても丁寧に解説されていてありがたい…こんな画期的な技い術が無料ソフトで使えるなんて素晴らしい!…

しかしその時強く思ったことが、

入門編にしては複雑過ぎない…?

もっとサルでもわかるように教えて…

ということでした。


入門チュートリアルのこちらの女の子、「シンプルちゃん」というらしいです。でも正直
初心者にとっては全然シンプルじゃない。
まばたきや小首をかしげる仕草は可愛らしいけれど、私がマスターしたいのは
右のものが左に移動するとかくるくる回り続けるとかそういう超単純な動きなのに!

これは後からわかったことですが、単純な移動回転のみの動作をさせる場合、チュートリアルのステップ2・3にあたる
・描画オブジェクトをパーツに振り分ける
・ポリゴンを整える
といった操作はまず必要ありません
特にポリゴンの編集は初心者には感覚的に分かりづらく、躓いてしまう可能性があります。
なので最初の段階では飛ばしてしまって差支えないと個人的には思います。

そこで単純な移動・回転・拡大縮小の範囲内でLive2Dアニメーションを作りたい、という方に向けた「超入門簡易版チュートリアル」を次回の記事で解説していきたいと思います。

続きを読む...

和泉プロパンとはねオンラインが共同開発!ゲームアプリ『ひらがなの種』配信開始!

2017年11月9日

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』

和泉プロパン住宅設備有限会社システム開発部のIZUMIPJ Appsと私たちはねオンライン株式会社は、大人も小さなお子様も一緒に楽しく遊べる育成ゲーム『ひらがなの種』を共同開発し、2017年11月1日よりiOSネイティブアプリの配信を開始いたしました。


>>アプリの詳細はコチラ


>>『ひらがなの種』ダウンロードはコチラ

はねオンラインでは本ゲームアプリで育成するキャラクター(主に「か行ステージ」以降に登場)のイラスト及びアニメーション制作、背景イラスト制作などを担当しています。

初回リリースに向けて計86点のイラストを制作し、そのうち77点にはLive2dを用いてアニメーションを付加しました。

Illustratorでのイラスト制作
大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』

Live2dでのアニメーション制作
大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』

全てのキャラクターをご紹介したいところですが、どんなものが育成されるかは実際にアプリで遊んだ時のお楽しみにしていただきたい…
そこで各ステージから私が特に気に入っているものを1点ずつご紹介させていただきます!

まずは「あ行」ステージから
『おくら』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
意外とこの形状で生ることを知らない方も多いのでは?子どもたちの興味関心のきっかけになれば、と花やつぼみも丁寧に描画しました。
「か行」ステージから
『火星(かせい)』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
右上でぴこぴこしてるのは火星人です。(※タコではありません)H.G.ウェルズが描いた由緒正しき(?)火星人のイメージです。(※決してタコではありません)
「さ行」ステージから
『セイウチ』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
割と渋いイメージのある動物なので、かわいらしく描くためにまろやかな曲線を意識しました。(
結果ひよこまんじゅうのようなシルエットに…)
「た行」ステージから
『天使(てんし)』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
現実でも滅多にお目にかかれない天使ちゃんはゲーム内でももちろんレアキャラです。最初金髪の巻き毛を描こうとしていたのですが、どうにもパンチパーマに見えてしまう(私の性格を反映している…?)ので最終的にツルっとなりました。
「な行」ステージから
『上り龍(のぼりりゅう)』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
勇壮果敢な上り龍をいかにポップに描くか、試行錯誤の結果シンプルに落ち着きました。『ひらがなの種』のダウンロード数も天に向かって上昇しますように!
本アプリは「大人と子供へ少しでもコミュニケーションのきっかけになって欲しい」という想いのもと制作されました。
一つ一つのイラストやアニメーションも、「どの年代の方にもわかりやすく親しみやすいもの」を心がけています。

簡単操作で誰にでも遊べるので、子育て世代の方だけではなく、様々な年齢層の方にプレイして頂けます。お父さんお母さんと子供たち、おじいちゃんおばあちゃんとお孫さんたち、兄弟や友達の間でも、いろいろな人たちの間で『ひらがなの種』が楽しいコミュニケーションのきっかけとなることを願っています。

無料配信ですので、どうぞお気軽に遊んでみてください。
評価・レビューお待ちしております!


大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』


iOSゲームアプリ『ひらがなの種』ダウンロードページ

共同開発:
和泉プロパン住宅設備有限会社

続きを読む...

イラストレーターでキャラクターイラストを作ろう! ~使用歴6ヶ月のわたしでもここまでできたイラスト作成術~

2016年7月20日

Adobe〔アドビ〕の二大看板(だと個人的には思っている)イラストレーターとフォトショップと出会ってはや半年が過ぎました。

知れば知るほど奥の深いこの2つのアプリケーション…。「一生かかっても使いこなせる気がしない…」 と途方にくれることもしばしば。

ですが!

その奥深さでますますこの2つのアプリに夢中にさせられています(*^^*)

毎日発見を繰り返す中で、イラストレーターでキャラクターイラストを作成する際の自分なりの手順ができてきたので、備忘録としてここに書き留めておこうと思います。

非効率な点多々あると思いますがあくまで一例としてご参考になさってください(^^)

Continue reading
続きを読む...

わたしのイラストレーター入門②

2016年1月14日

今日はイラストレーターの醍醐味である「パス」と「ベジェ曲線」を習得するべく

当社の看板キャラクター「はねぷー」ちゃんを描いてみました!

hane-poo01
線の少ない単調なイラストですが、実は複数のオブジェクトからできています。

試しに分解してみると

bara
こうなります!

このように見えない線までパーツとして描画することによって、自由自在に変形することが可能になります。

例えばお耳をめくってみたり…hane-poo3

ほっぺをつねってみたり…hane-poo4

前髪を切ってみたり…hane-poo5
いろんなことができちゃいます♪

photoshopのアニメーション機能と組み合わせれば、動かすことも!
正面ぷーanime
「パス」ってすごい!

想像以上に柔軟なツールだと実感しました。

まだまだ慣れないので編集も根気が要りますが(*_*;)

着せ替え遊びのようで楽しい作業です(*^^*)

使いこなせればweb制作においてもきっと役立つはず!

イラストレーターのパスツール、引き続き勉強していきたいと思います。

続きを読む...

わたしのフォトショップ&イラストレーター入門①

2015年12月8日

前回の記事で、

Photoshop(フォトショップ)とIllustrator(イラストレーター)が導入された喜びを語りましたが、
今日はさっそく使っていきたいと思います!

まずはさくっと起動!


Photoshop CCの起動画面です。
さすがスタイリッシュですね!

お次はIllustrator CCです。

※CCとはクリエイティブ クラウド(Creative Cloud)の略です。
(今までのようにソフトをパッケージで購入するのではなく、毎月の使用料を支払って利用するサービスです)

イラストレーター起動画面
こちらもスタイリッシュ・・・だけどあれ!?

ボッティチェリのヴィーナスは!? (゚o゚*)

イラレといえばボッティチェリでしょ?
という私の認識はとっくに古くなっていたようです・・・

イラレ旧
←こちらがおなじみのヴィーナスさん…(Illustrator CS3より)

 

Illustratorのパッケージには初代から長らくボッティチェリのヴィーナスが起用されていましたが、
CS以降は表舞台には使われていないそうです。
ちょっと寂しいですね…。

※CSとは、クリエイティブ スイート(Creative Suite)の略です。
(簡単に言っちゃえば、CCになる前のバージョンのシリーズ名です)

しかし問題なのは中身です!
いわずと知れた高性能ソフトを使っちゃいましょう!
Photoshopを使って、
はねオンラインからお客様に配信する2016年最初のニュースレターを作成することに。
私の当社での2つ目の業務です。

今年のニュースレターを来年用に書き換えるだけですから、大丈夫大丈夫♪

さあやるぞ!

 

(30分後・・・)

  Continue reading

続きを読む...