いろいろ作ってみよう・水仙花

ミニチュアやCGやキモノなどいろいろ作ってます

Open Toonzでメッシュ変形やボーンアニメーションを作ってみた

前回、OpenToonzという2Dアニメーションを作れるソフトで簡単なパラパラ漫画を作ってみたのですが、今回はもうちょっとぬるぬる動く感じのが作りたくてやってみた。

 

OpenToonzにはメッシュ変形というのでキーフレームアニメーションが作れる…とか言われても意味が分からないのでとりあえずやってみます。

 

opentoonzのメッシュ変形のやりかた

 

なんか描く。

そして塗りつぶす。色も形も適当です。

f:id:obatyan1:20190730155856p:plain

 

メッシュを生成

f:id:obatyan1:20190730160203p:plain

1左下の「プラスチックツール」

2左上の「メッシュを生成」

3メッシュのエッジの長さを適当に下げる

4適応

 

ボーンを入れる

f:id:obatyan1:20190730174019j:plain

上のほう「モード」を『ボーン作成」に。

 

こんな感じにボーンを入れる。後から修正できるので適当です。

 

f:id:obatyan1:20190730174752p:plain

 

うごかす。

モード→アニメート 

f:id:obatyan1:20190730174901j:plain

 

さっき作ったボーンを動かすと動く。

f:id:obatyan1:20190730175106g:plain

 

 

思ってたんとちがう…

 

ちがうやろメッシュってのはもっとこう…こう!

f:id:obatyan1:20190730180130g:plain

 

私がしたいのはもっと自由に形が変わるモーフィング!

ていうかフォトショやGIMPにおけるメッシュってモーフのことじゃん!opentoonzのメッシュはただのボーンウェイト!いや便利だけども!紛らわしい…

 

というわけで、次回はおばちゃんの心の中のメッシュ、opentoonzにおける中割というやつを書きたいと思います。

 

OpenToonzで簡単な手描きアニメーションを作ろう準備編

前回、opentoonzのダウンロードから日本語化まで行いました。次は簡単な手描きアニメーションを作ってみます。

まずは画面を使いやすくカスタマイズしましょう。

 

 

 

画面を見やすく

サブ画面を消す

OpenToonzを起動するとメイン画面の上に重なるように出てくるサブ画面をとりあえず消してしまいましょう。

f:id:obatyan1:20190727220647p:plain



 

タイムシートを出す

上のメニューバーから「ウィンドウ」→下の方の「タイムシート(X)」をクリック

f:id:obatyan1:20190727220709j:plain

 

 

ででんと真ん中にタイムシートが出てくるので、これをクリックしつつ左側に持って行って赤いラインがでたところで離すとこんな感じになります。

f:id:obatyan1:20190727220938p:plain

 

 

 

 

できた。

f:id:obatyan1:20190727221001p:plain

ここがイラストソフトでいうところのレイヤー的なものになります。

ここにペイントソフトのようなノリで絵を描いていくとgifアニメーションのようなものが簡単に作れます。もちろん本格アニメのようなイラストをインポートしたり、キーフレームアニメーションを作ったりいろいろできるらしいですが、さしあたりおばちゃんとしては手描きパラパラ漫画を目標にしようと思います。

 

編集しやすくする

さてレイヤー的なものの透明度的なものを操作します。訳が分かりませんがとりあえずやってみましょう。

 

 さっき出したタイムシートの左端を右クリック→オニオンスキンを有効化。

f:id:obatyan1:20190727230022j:plain

 これで準備は完了です。

 

 

さっそく作ってみる

 1・タイムシートの1のところが青くなっているのを確認して、真ん中の画面に何か書く。とりあえず何でもいいので適当に書いてみます。

f:id:obatyan1:20190727230226p:plain

 

 2・タイムシートの2を選択してまた何か書く。

f:id:obatyan1:20190727230356p:plain

このとき、さっき書いた絵が薄赤で表示されるのでやりやすくなります。これがさっきやった「オニオンシート有効化」です。

 

うごかす

さっそく動かしてみましょう。

右側の画面をクリックしてから、下にある再生ボタンをクリック。ループ再生をクリックするとループします。

f:id:obatyan1:20190727230705p:plain

こんなわけのわからないアニメーションができたと思います。一応ロウソクの炎のつもりです。

f:id:obatyan1:20190727230912g:plain

 

 

 

あとはこの応用でパラパラ漫画方式のアニメーションが作れます。

 

f:id:obatyan1:20190727232044g:plain

 

その他の基本操作

画面の拡大縮小

ctr+スクロール

画面の移動

左クリックしたままドラッグ

f:id:obatyan1:20190727232408g:plain

 

フレームを消したい

右クリック→削除

f:id:obatyan1:20190727231153j:plain

 

速度を変える

右下の数字をいじる。

デフォルトは24ですがパラパラ漫画をつくるなら10くらいがいいのでは。

f:id:obatyan1:20190727232014p:plain

 

 

あとは左側のバーから色を変えたり塗りつぶしたり、普通のペイントソフトのように使えます。

Opentoonzではこのほか、本格的なセル画アニメーションやぬるぬる動くキーフレームアニメーション、フォトショップなど他のソフトで描いた絵をインポートするなどいろいろできるそうですのでおいおいやってければと思います。

 

 

参考記事

 

suisenkakimono.hatenadiary.com

 

Open Toonz を日本語化する手順・初心者だけど2Dアニメーション作ろう!

OpenToonzという無料の2Dアニメーション作成ソフトがあってとても便利そうなのですが、日本語の解説が全然ないのでおぼえがきその1。

 

OpenToonzの始め方

ダウンロード→解凍。ここまではよくあるながれ。公式チュートリアルが分かりやすかったです。

https://opentoonz.github.io/document/OpenToonz%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB_%E5%B0%8E%E5%85%A5%E7%B7%A8.pdf

 

問題はここから。まず日本語化したいのですが、すでにわからん…ていうか公式チュートリアルわかりにくすぎ

 

 

日本語化するにはこの5ステップです。

f:id:obatyan1:20190727215148j:plain

1まず左上のFileをクリック

2ずらっと出てくるメニューの中から Preferences... をクリック

3出てくる別窓の左上、Interfaceをクリック

4下の方のLanguageから日本語を選ぶ。

5左上×ボタンでシャットダウン→再起動(ここ忘れずに)

f:id:obatyan1:20190727215717p:plain

シャットダウン時にごちゃごちゃ言ってくるけどDiscardChangesでだいじょうぶだった。

 

 

とりあえずこれで日本語化できました!

すごく使いやすそうなツールなので、またチュートリアルを作っていきたいです。

 

 

です。

 

ボドゲがどこのボドゲカフェにあるか検索できるやつ(仮)つくってみたその2

とりあえずボドゲカフェのページから所蔵ボドゲを登録できるようにしたけど登録画面がごちゃごちゃして分かりにくいので、adminizeというプラグインでシンプルにしてみた。

 

やってみた

これが

f:id:obatyan1:20190721211741p:plain

 

こうなった。

f:id:obatyan1:20190723090635p:plain

登録フォーム以外何もないので分かりやすい。

でもこの方式の最大の欠点は

微妙に分かりにくい

というところです。

 

相互リンク方式は見た目のカスタマイズがいろいろできて便利なのですがその分登録が分かりにくい。まずボドゲカフェのページから編集画面に飛んで、登録したいボドゲをサーチ(英語)して、「both」ボタンを押して、「投稿」ボタンを押す。と4アクションも必要です。しかも登録したいボドゲが見つからなかったら新しく投稿ページを作成するという非常にめんどくさい過程が発生します。

こんなんできるかー٩(๑`н´๑)۶

 

理想はワンタップで登録できるこんなフォームです。

 

f:id:obatyan1:20190723091532j:plain

ここに「ポルド」と入れると「PORDO(ポルド)第一巻」という投稿を自動生成したうえで相互リンクを貼ってくれるようなツールを作るのは難易度が高いです。相互リンクを貼ってくれるだけならまだしも、投稿の自動生成までとなるとどうやるか全然分からない。少なくともHTMLとCSSしか知らない程度の私にはできないやつです。たぶんphpとかをどうにかするんだと思う……

早くAIが発展してsiriに「こういうやつをつくりたい」と言ったら勝手に生成してくれるようになればいいのに……

 

 

そこで相互リンク方式はあきらめて別の方法を探すことにします。

 

タグを使ってみる

相互リンクほどの自由度は無いがお手軽なタグを使って検索できるようにしてみる作戦です。

各ゲームの詳細などは表示されず名前のみがずらっと並ぶシンプルな感じになりますがその分登録は簡単な上に一括登録もできる。

 

やってみた。

f:id:obatyan1:20190723124542p:plain

ここの「タグ」のところから登録したいゲームをえらんでチェック。終わったら「更新」をクリック。

 

やったこと:adminizeで投稿画面をシンプルに、Loco Trancelateで翻訳、あとfanction.phpでタグ一覧を表示させるやつを追加、の3点。

 

 

まとめ

チェックを入れて更新を押すだけ。これなら簡単にできるんじゃないか??

 

というところまでやってきました。あとは誰でも投稿できる登録フォームがあれば最低限の形はできあがり!

 

 

ボドゲがどのカフェにあるかすぐ分かる「ボドけんさくん(仮)」作ってみたその1

どのボードゲームカフェにどのボードゲームが置いていあるか一発検索できる&登録もできるサイトを作ってみよう!という道のり第一歩です。

 

ツールの決定

とりあえずワードプレスというもので作ってみることにしました。

なぜワードプレス(WP)かと言うと、

  • 私のITスキルは底辺
  • よって最低限の体裁を整えるのが目下の目標
  • かつ、膨大な情報を載せる必要がある

という3つの事情の合わせ技だからです。

もし今後「ボド検索くん」の需要が伸びてきたら、プロの人にサイトを作ってもらうことになりますが、その際全く新しいシステムを導入しようとするとこれまで入力したデータが無駄になってしまいます。なのでプロでも使ってる(ような気がする)ツールであるワードプレスを採用することにしました。

 

問題点

WPは基本的にはブログを作るためのツールです。なのでブログを作るのなら知識がなくても大丈夫なのですが、ブログ以外の物を作るにはかなり高度な知識がいります。私のITスキルはタグ手打ちで自分のサイトを自作できる程度。学校で言えば中学校やくらいのお子様レベルです。WPでブログ以外の物を作るのの難易度は新卒社会人3年目くらいでしょうか。大丈夫だろうか…と一抹の不安を抱えつつ進むことにします。

 

やってみよう

以降は技術的なことを延々書いていきます。興味の無い方はすみません;;

 

とりあえずまず、URLを用意。独自ドメインとかの前に職権乱用して自社サイトに置いてみました。そしてWP設置。かっこよさげなテーマを選択。

ここまではやったことがあるので楽勝です。

f:id:obatyan1:20190721210613p:plain

とりあえずそれっぽいものができた!簡素だけどそのあたりはおいおい。

 

たとえばここでリトルケイブ高円寺店さんのページを見ると

f:id:obatyan1:20190721210805p:plain

こんな感じでリトルケイブにあるボドゲ一覧が出てくるという予定です。

あとはデザインをそれっぽくしたり、データをどんどん追加したりすればそれっぽくなりそう。目当てのボドゲが探せる検索窓を作ったり、都道府県別にボドゲカフェを絞り込みできたりいろいろできそうです。

 

形はできた、がっ!!

 

ここまではできたんですが、ここから先がだんだん難しくなってきます。

双方向リンク自動生成

「ボド検索&登録くん(仮)」は

  1. リトルケイブにポルドあるかな?
  2. 都内でポルドできるカフェあるかな?

の二つのニーズにこたえる必要があります。つまり双方向リンクを自動で作成してほしい。なのでCustom Related Postsというプラグインを使います。

f:id:obatyan1:20190721211448p:plain 

 

   英 語 で す 。

 

一気にハードルうなぎのぼり!!

 

google先生に聞きながらなんとか作業を進めました。実際にはチェックボックスにいくつかチェックを入れただけだけど、どっと疲れた。

 

とりあえず、こんな編集画面ができました。

f:id:obatyan1:20190721211741p:plain

 

ここでcustom related posts の add relation に検索ワードを入れて search を押して both をクリックすれば相互リンクが挿入されて、最後に 更新 をクリックすると登録されます。タグにも追加します。カフェを新規に登録した場合はカテゴリも設定します

 

………

…………複雑すぎ!!

無理!絶対忘れる!一週間くらい間が空いたら多分もう二度とできない!

 

ボドげんさくん(仮)は誰でも自由に気軽に書き込めるサイトを目指しているのに製作者ですら挫折するような使い勝手ではさすがにマズい。なんかもっとこう、ラインを送るくらいのシンプルさでどうにかならんか。

 

 

とりあえず、なぜ難しいかを分析してみると

  • 不要な項目が多い
  • 「投稿」「タグ」など意味不明の言葉
  • 英語
  • とにかく英語

だと思うのでそのあたりをどうにかしたい。

 

 

カフェにあるボドゲを検索できるサイトの最大の欠点

あのゲーム遊びたいな…

どこのボドゲカフェに置いてあるかな??

 

そんなときにさくっと検索できるサイトがあるといいなーということで作ってみたい体験記のその2です。前回の記事はこちら。

 

suisenkakimono.hatenadiary.com

 

 

 

ボドげんさくん(仮)は本当に便利か?

 

今回は、ボードけんさく(仮)の製作が(私のしょぼIT)技術的に可能だったとして、果たして存在意義はあるだろうか?という部分を考えました。

 

既存システムとの比較

たとえばボードゲームのデータ量としてはボードゲーマさんなどいろいろあります。ボードゲーマさんに載ってないボドゲはないんじゃないか?というくらい。いまさら私が手作業でぽちぽち入力してもたぶん一生かかっても追いつけないです。しかも、ボードゲーマさんは既に「ボドゲカフェの所蔵ゲームを検索できるやーつ」機能がついてます。

f:id:obatyan1:20190721130605j:plain

 

なんだじゃあこれでいいじゃん!囁きノ館やりに行こ!

て感じなんですが、こちらの最大の欠点は

本人しか登録できない

というところです。

カフェのスタッフさんが登録してくれなかったボードゲームは探せません。でも膨大なゲームがある中でスタッフさんが全てを登録するというのは無理があって、検索に抜けや漏れが出てしまいます。

実際ポルドはリトルケイブ高円寺にあるけど出てこない…

f:id:obatyan1:20190720194342j:plain

実際ポルドはリトルケイブ高円寺にあるけど出てこない…

 

なのでカフェ関係者でない一般のお客さんが自由に登録できるシステムがあるといいなー…というのが「ボドけんさく(仮)」の出発点ですがはたしてそんなにうまくいくのか。そもそも大手さんがやってないということはなにか致命的な欠点があるのではないか。

 

と思ってツイートしたところ、信頼性という問題点が浮かび上がってきました。

 

f:id:obatyan1:20190721131250j:plain

ボードゲーマさんの機能を教えてもらったところ。twitterの人たちの知識量すごい…

 

 

ぼど検索君(仮)の最大の欠点

 

誰でも自由に更新できるとなると古い情報がそのままだったり、記載ミスだったり、勘違いだったりと、なかなか正確な情報を集めるのが難しい可能性が高いです。その点、カフェの中の人が更新するボードゲーマさんならほぼ100%正確です。

 

なーんだ、じゃあやっぱりいらないじゃん。さっさと囁きノ館やりに行こ。

 

と一瞬思ったのですが、不正確な情報でもそれなりの価値はあるのではないか?と思い直しました。

たとえば「ポルド第一巻をやりたい!」という優しい方がいたとして、ボードゲーマで検索してもヒットしません。ポルドはゲムマ秋まで再販がないので、現状でポルドを遊ぶにはポルドを買ってくれた30人の人を探し出して友達になってボドゲ会を企画して持ってきてもらう、という相当な手間が必要になってしまいます。

 

「どうしても小人さんたちのスチームパンクな冒険を今すぐ遊びたい!半年も待てない!でも30人のうちの一人を探し出すとか無理だし面識ないのに話しかけられないし待ち合わせできるコミュ力なんて無い!」

 

という人がもしかしたら世界に一人くらいいるかもしれない。

いや普通に私に問い合わせてくれればウキウキでポルド会を企画しますがそれでも関東限定になってしまいます。あとは近所のボドゲカフェにかたっぱしから電話をかけて「ポルドありますか?無い??置いてください!!」とやるしかない。やってもらったら私としてはありがたいですが(^^;)

 

そういう時に「ボドけんさ君(仮)」でリトルケイブ高円寺店がヒットすれば、少なくともリトルケイブ高円寺店にはポルドがある可能性がある、ということは分かります。そうすればあとはリトルケイブ高円寺店に電話して「ポルドありますか?ある?二巻も置いてくださいなんなら10個くらい置いてください!!」とやればいい。

 

つまり、多少不正確な情報でも、ある程度の精度さえあれば一定の価値はあるのではないか、と思います。

 

 

 

まとめ

  • ボド検索(仮)にはある程度の価値がありそう(な気がする)
  • でもいまいち確信が持てないからとりあえず自作してみて反応を見よう
  • 外注するほどの予算は無い

 

 

 

 月末に囁きノ館で遊べることになりました!

持ってきてくれる方ありがとう(^▽^)

 

ボドゲカフェで遊べるボードゲームを検索するサイトを作ってみたいおぼえがき。

あのゲームやってみたいな、でも絶版だ(゚益゚)

ボードゲームカフェなら置いてあるかも!探してみよう!

 

となったときに、現状では探せるサイトがほとんどないので自作できるだろうかというおぼえがきです。

 

 

 

きっかけ

現状ではボードゲーム関連では超有名な情報サイト、ボードゲーマさんに検索機能があるのですが、これはボードゲームカフェの関係者しか書き込めません。みんなが全ての所有ゲームを記載してくれればいいけれど現状そういうわけにいかない(汗

f:id:obatyan1:20190720194342j:plain

たとえばこちら、私が作成したボードゲーム「PORDO」なんですが、ボードゲーマで検索しても当然ながら出てきません。

まぁポルドは超マイナーなので仕方ないんです。が、逆にマイナーすぎて手に入らないものほど探したい。制作数30個というポルドのようなゲームになると世界でたった一つ、リトルケイブ高円寺店でのみしか遊べません(^^;)そういうマイナーゲームほどどこにあるか探したい。定番どころのゲームでも案外おいてなかったりするからやっぱり探したい。でもお店のスタッフさんは全てのゲームを登録する手間はかけられない。

 

つまり何が言いたいかといいますと

「囁きの館」をやりたい!

「周る遺跡」をやりたい!!

「じゃじゃじゃじゃーん」は超かわいい!!!

みたいなときにどこのボドゲカフェにあるか検索できるサイトを作りたいし、

 

ボドゲカフェに行って

「ハーレムふらぐ」やったよ!

「触覚かるた」たのしかった!

「丘の上の裏切りの館」もりあがった!

みたいなときにさくっと登録できるようなサイトを作りたい。

 

 

 

エキテンやぐるなびみたいな、ユーザーがお店を登録したり更新したりできるサイトができたらいいなぁ…!

 

 

 

と、いうのが事の発端です。

 

 

 

さあではさっそく。

さくせん を たてるぞ !

 

 

こういうかんじのものが作りたい。

 

f:id:obatyan1:20190720202255g:plain

A店のページを開いたら所蔵ゲーム一覧が出てきて、ゲームのページを開いたらそのゲームがおいてあるカフェ一覧が出てくる。

 

 

図にするとこんな。

f:id:obatyan1:20190720195746j:plain

 

 

使用ツールの目星

エキテン 作り方 で調べたら広告ばかりでてきたので、口コミサイト 作り方 とかで調べてみたけれどよく考えたら口コミサイトなだけでなくて逆引きができないといけない。もう検索ワードすら分からない……

とりあえず、最初は最低限の機能でいいから自作してみて、慣れてきたら外注を視野に入れるいつもの方式でいきたい。ということは情報の移行がスムーズな共通ツールを使いたいのでワードプレスで自作がいい気がする。

 

 

次回以降、ワードプレスで何をどうすればいけるのかを考えていきます。