すべてのカテゴリ

こんにちは。たつやです。この有料記事では、２段階プルダウンを実現する方法を２つ、Step-By-Stepで説明します。（将来的に簡潔な方法が導入される、などの事象にはご了承ください。）はじめにプログラミングと同じように、『２段階プルダウン』を実現（実装）するにはいくつか方法が考えられます。この記事では、２段階に限定して、単純な方法を２つ紹介します。それ以上の方法については、FILTER関数などを用いて関数プログラミング的にテーブルを操作していく必要があるため、そちらを探してみてください。また、この記事独自の特徴として、C言語における２次元配列と対比した書き方をしています。C言語をかじった方には、より分かりやすくなっていると思います。ただ、この記事では、すべて画像で説明しているため、C言語を知らなくても問題ありません。なお、この有料記事の範囲内で不明な点や誤りを見つけた場合には、メッセージをいただければ対応致します。動作のようす

前回はじめてのキャラクターアニメーションの練習として「しゃがむ・立つ」動きの作り方とヒップファーストの原則をご紹介しました。次のステップ、2番目の練習としておススメなのはジャンプです。その場で上に跳び上がる垂直跳びです。このブログでは技術というより知識の積み重ねがアニメーションでは大事と繰り返しお伝えしてきました。今回は身につけていただきたい知識は予備動作(溜め)です。溜めはジャンプに限らずパンチやキックなど予備動作でパワーを蓄え一気に爆発させる動きを作るときに必ずといっていいほど発生する重要な要素です。今回は攻撃モーションやスポーツの動きを作るときにも役立つリアリティのある溜めにをご紹介します。それでは実際に作っていきましょう。リグを動かしてはSの繰り返しでポーズを作っていきます。作業の最初は全部のリグにキーを打ち全リグを選んでタイミング調整するのがオススメです。 まずはボールのバウンドで学んだ重力表現を正しく作りましょう。腰と足のリグの移動Yです。ほとんどのアニメーションは地球もしくは地球に良く似た惑星での動きになるのでこの重力表現は常について回る問題です。正しい自由落下のカーブ(グラフ)を作れるようになりましょう。さて今回のポイントは予備動作(溜め)です。ジャンプする前に一度沈み込む動きですね。今回はオススメの溜めのやり方を解説します。みなさんは刃牙という漫画(またはアニメ)をご覧になったことがあるでしょうか？少年、範馬刃牙(はんま ばき)が史上最強の生物である父親、範馬勇次郎を倒すために数々のライバルと戦い成長していく格闘漫画です。私の大好きな漫画です。格闘のポージング

今回からキャラクターアニメーションの練習に入っていきます。練習に使用するモデルは今回こちらを使用します。 YouTubeなどでアニメーションのチュートリアルを検索すると「歩き」がたくさん出てきます。歩きはアニメーションの基礎と言われていて、確かにその通りなのですが、CGアニメーションの歩きは実はとても難しい部類になります。なのでこのブログで歩きを取り扱うのはかなり先になります。初めての方にオススメの練習は「しゃがむ・立つ」モーションです。今回は体幹の動きに重きを置いたお話なので腕は隠しています。立っている状態からしゃがむ↓ しゃがんでいる状態から立つ たったこれだけですが、このシンプルな動きの中に驚くほどCGアニメーションの大切な要素が詰まっています。今回の内容はアニメーションの極意と言っても過言ではありません。一つ一つ解説していきますね。 さてこのしゃがみモーションを実際に作っていきましょう。基本的な流れはボールのバウンドと同じです。リグという体の周りにある四角いコントローラーでキャラクターの各部位を動かし、キーボードのSでキーを打っていきます。0フレーム目に立ちポーズを作りキーフレーム(キーボードのS)を打つ↓ 1秒かけてしゃがむ(30F目にしゃがみポーズを作りキーフレームを打つ) ↓ しばらくしゃがませておきたいのでポーズは変えず50F目にキーフレームを打つ ↓ また1秒かけて立ち上がる(80F目に最初の立ちポーズをコピーする) という流れになります。 実際の作業の流れを動画でご覧ください。 さてここからがキャラクターアニメーションの基礎にして極意となるポイントです。その

CGアニメーションを作る上で欠かせない機能があります。使わなくてもアニメーションを作ることはできますが質の高い動きを作るために必須な機能、その名はグラフエディタ！日本語で言うと関数表です。関数って数学でやりましたね。比例するとか反比例するとかどうとか。見た目からしてなんだか難しそうですね。関数とか聞くと文系の人は拒絶反応を起こすかもしれません。でもご安心ください。私は学生時代、物理0点取ったことあります。数学は3点とか当たり前でした。そんな私でも使えるグラフエディタは怖くありません！これから丁寧にご説明していきます。このグラフエディタ、CGアニメーションを作る者にとって最高の相棒であり最大の宿敵でもあります。作業の大半はとにかくこのグラフとの格闘です。仕事を始めた最初のうちはこのグラフエディタ、夢に出ます。それくらい常に触れる機能なんですね。 さてこのグラフエディタどういう時に使うのか。例えばエアコンの調子が悪いとき、業者を呼びますよね。来てくれた業者は「それじゃ中を開けて見てみますね」って点検しますよね。 そうです、中身なんです。 なんかアニメーションの動きがおかしい、 良い感じにならない、そういう場合すぐにグラフエディタを開いて中を見ます。 前回、ボールのバウンドを作成しましたが、フワフワ変なアニメーションでしたね。0:45あたりをご覧ください。何かおかしい？？どこを直せばいい？？ こういうとき業者がエアコンの中身を開けて点検するようにアニメーターはグラフエディタを開きます。前回作ったボールをグラフエディタで見てみましょう。(Mayaの場合ウインドウ→アニメーション エディ

React で変数を表示する！React のフレームワークを利用して、Vue の公式チュートリアルと同じことをやっています。二回目は、Javascript の変数を表示する方法です。あまり Vue と変わりません！Javascript の変数Vue では HTML、CSS、Javascript を記述する場所が、xxxx.vueファイルのタグで決められていました。React で Typescript を利用する場合には、xxxx.tsxというファイルがこれに相当するファイルになりますが、基本的にこのファイルは、Typescript を記述するファイルです。したがって、普通に Typescript の変数（定数）を作れば良いだけなので簡単です。Tαypescript で書いているので、変数（定数）の型名を明示的に書くとコンパイル時に、変数（定数）を利用する際の型のチェックをしてくれるので、実際にプログラムを実行する前にミスを見つける事ができます。今回の例では、「count」という定数を作って表示させているので、変数の宣言はconst count: number = 0; のように行います。この定数の型は数値（number）なので、その型を宣言しておくと、プログラムでこの定数を使う際にチェックしてくれます。この例では、使うのは表示の部分のみなのであまり、大きなメリットはありませんが、例えば、この定数を関数に渡したりする場合には、関数側の型と一致しているかをチェックしてくれるので、型が違っている場合には、コンパイル時にわかるという仕組みです。ステップ２のコードの例以下のコードがステッ

CGアニメーションの最初の練習として定番中の定番であるボールのバウンドです。CGアニメーションを学びたい方はぜひ最初に取り組んでみてください。このボールのバウンドにはCGアニメーションを作る上で大切なポイントがたくさん詰まっています。今回はテニスボールのバウンドを再現してみましょう。CGで何かを作成すると最初は灰色ですよね。モデリングはこれに色や質感をつけることでどんなボールなのか表現することができます。テニスボールなのか鉄球なのか、一目で重いのか軽いのか柔らかいのか硬いのか大体わかりますよね。しかしアニメーションの場合は、色や質感など見た目を変化をさせることはできず、その代わり動きでそれを表現します。左のボールは灰色なので見た目では硬いのか柔らかいのか、跳ねるのかあまり跳ねないのかよく分かりません。このボールを動かしたときに見る人が「テニスボールっぽい」と感じてくれたら勝ちです！ さて手描きのアニメーションの場合は全ての画を描く必要がありますが、CGアニメーションの場合はほとんどコンピュータに任せることができます。しかし全て任せるわけにもいかないので、自分である程度は指定する必要があります。その指定する印のことをキーフレームと呼びます。 A地点→キーフレームを打つ B地点→もう一つキーフレーム打つ A地点とB地点を指定するだけで、その間を移動するアニメーションをコンピュータが作ってくれます。移動や回転させてはキーフレームを打つ。時間を進めてまた移動や回転を変えてキーフレームを打つ。CGアニメーションはこの繰り返しです。 この機能を使ってボールを3バウンド作ってみましょう。Ma

すみません、もう少しだけ基礎知識のご説明にお付き合いください！ アニメーションは時間が深く関わってきます。動きは時間が経過することでしか起こり得ないですからね。CGアニメーションは時間の取り扱いが非常に大切になります。下の画面をご覧ください。 ①Mayaの画面②Blenderの画面赤枠で囲ったところに数字がたくさん0〜100までメモリのように表示されていますね。ここをタイムスライダ(またはタイムライン)と呼びます。タイムつまり時間を示しています。 ここで時間の単位についてのお話です。普通、人が使う時間の単位って秒とか分とかですよね。しかしCGの時間の基本単位はフレームという呼び方をします。聞き慣れない言葉ですね。フレームは前回ご紹介したFPSのFです。これはパラパラ漫画の一枚一枚の画(え)のことだと思ってください。1フレームはパラパラ漫画の1枚目。30フレームはパラパラ漫画の30枚目という感じです。あるいは、動画をコマ送りするときにみなさんコマという単位を使うと思いますがフレームはそのコマとほぼ同じ意味です。アニメーションはとにかくたくさんの枚数(コマ)が必要なので秒よりもさらに細かい単位が必要になります。そこでフレームという単位ができました。頻繁に出てくる用語なのでぜひ覚えてくださいね。 30FPSと設定した場合は1秒間は30フレーム(30コマ)です。このタイムスライダの30が1秒の地点を表していることになります。このフレームという時間単位にだんだん慣れていきましょう。 【余談】 このブログでは基本的にアニメーションを30FPSで作っていきます。何FPSで作るかは業界によって

そもそもCGアニメーションて何でしょうか？その原理を簡単に解説します。原理は、ずばりパラパラ漫画です！教科書の端っこに棒人間を1ページまた1ページと描いていき最後にパラパラ〜と手で一気にめくると動いてるように見えるあれですね。止まっているただの絵を連続で表示することで動いてるように見せる。これがアニメーションの原理です。CGアニメーションも例外ではなく、つきつめると静止画の連続です。ただしCGアニメーションと手描きのアニメーションとで違いが全くないわけではありません。その違いとは。それは「手描きは全ての絵を人間が描かなければならない」のに対してCGアニメーションは「ある程度の絵はコンピューターが描いてくれる(=補完してくれる)」という点です。コンピュータがかなり手伝ってくれるわけですね。 さてアニメーションは静止画の連続ということが分かりましたが、一体何枚の静止画を描けばいいんでしょうか。何枚描けばアニメーションと呼べるのでしょうか。ここで基礎知識として一つの用語を覚えてください。 それはFPSです！ 一人称視点のゲームのことではありません。フレームパーセカンド略してFPS。1秒間に何枚の絵を表示するかという意味です。ゲームをやる人は聞いたことあるかもしれませんね。例えば30FPSという場合は「1秒間に30枚の絵を連続で表示する」という意味になります。何枚描けばいいの？という問いに対してその答えは「FPSで指定する」ということになります。このFPSは業界によってまたは作品によって変わってきます。アニメの世界だと24FPSですし、ゲームだと30か60FPSだったりします。 という

こんにちは。ココナラでCGアニメーション講座を開催しています、もすこと申します。CGアニメーションのコツをお伝えしていくブログです。お読みいただきありがとうございます。近年は専門学校に行かなくてもYouTubeやさまざまなサイトで必要な情報を十分得られる時代になりCGの勉強を独学で始められる方も多いと思います。ところがモデリングをある程度学び、いざアニメーションの段階になると途端に情報が少なくなるのが現状です。 ・どうやったらクオリティの高いアニメーションを作れるのか分からない。 ・そもそも手順が分からない。 ・歩き以外のチュートリアルを知りたい。 ・どうやったらプロになれるのか、就職できるのか分からない。 CGを独学で勉強していくと上記の壁にぶつかると思います。私も学生時代は今以上に情報が少なく本当に困りました。運良くとある会社が開催していた無料のトレーニングコースを受けることができました。そこでようやく実践的な技術を学べたのでした。 その後、私はゲーム会社でずっとアニメーションを作り続けてきました。運良くというか悪くというかずっと下請けだったので本当にさまざまなタイトルに関わり色んなテイストのアニメーションを身につける事ができました。その経験を活かしてここではそのノウハウを初心者の方にも理解できるよう公開していきたいと思います。 基本的にMayaというソフトで説明していきますが、このブログでご紹介するアニメーションのノウハウはどんなソフトでも使える普遍的な内容になっています。3ds Maxや最近流行のBlenderなど、ソフト関係なく役に立つ本質的なテクニックです。【余談】

Vue の公式チュートリアルVue のデフォルトバージョンが Version 3.x になりました。久々に Vue の公式サイトに行ってチュートリアルを見てみました。Vue のデフォルトバージョン前回は、Vue を学習する場合、Version 2.x を学習するか、Version 3.x を学習するかを選ぶ必要があるという話をしました。少し時間をかけて学習をする場合、長期的には、Version 3.x に移行していくので初めて学習する場合で、特に就職先やプロジェクトがらみでどちらでも良い場合は、Version 3.x を学習する事をお薦めするという話を書きました。Vue の Version 3.x は、最初のバージョンは、2020 年 9 月 18 日にリリースされていて、Version 3.1 が 2021 年 7 月 7 日に、Version 3.3 が 2021 年 8 月 5 日にリリースされています。これまでは、Version 2.x が Vue のデフォルトバージョンでしたが、2022 年 2 月 7 日に Version 3.x になりました。デフォルトバージョンとはどういうことかというと、特に指定しないで「vue」を CDN や、パッケージ管理アプリで指定すると、自動的に Version 3.x が利用されるようになります。これまでは、これが Version 2.x でした。今後は、Version 2.x を利用する場合は、明示的に Version 2.x を指定する必要があります。これまでは、デフォルトバージョンが Version 2.x だったので、Vers

チュートリアルの実行を邪魔するハードルチュートリアルの例題を動作させるには幾つかの共通したハードルがあります。この記事では、よく耳にする壁を紹介します。最初の壁は？前回は、React 公式サイトのチュートリアルを学習の第一歩の例として取り上げました。多くの人が躓く場所は幾つかあると思いますが、多くの人がぶつかる最初の難関は、開発を始めるために必要な PC の設定ではないでしょうか？チュートリアルでは、二つの設定を紹介しています。＊　一つは Web 上で書く方法です。＊　PC に開発環境を作る方法（npmなどのパッケージ管理ソフトを使う方法）Web 上で書く方法は、特に最初の設定は必要なく、チュートリアルをすぐに始められます。あとは、Web 上のツールの使い方を覚えれば進める事ができます。もう一つの方法は、開発用の PC 上に必要なアプリ（ツール）をインストールして、開発を始める方法です。将来的にはこの方法で開発する事になると思いますが、初めてだと設定に戸惑うかもしれません。必要なアプリは：＊ npm (パッケージ管理アプリ、nodeのパッケージに含まれています)＊ エディタ（vscodeなどのコードを入力するためのアプリ）です。実はこの詳しい設定は、チュートリアルでは説明されていません。 このチュートリアルの前提は、パッケージ管理アプリとコードを入力するためのエディタは既に PC にあるという仮定で書かれているからです。難易度的には、Web ブラウザで入力する方法をとる方が簡単ですが、将来的な事を考えると、開発用の PC の開発環境を設定した方が役に立ちました。どんな解説も仮定

React の公式チュートリアルを見てみましたWeb 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。React のチュートリアルリアクトの公式サイトにチュートリアルが紹介されています。このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。React の簡単な仕組み最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法

【フォトショップ】最近フォトショップを始めようと勉強し始めてみた。でもまだフォトショップは購入してない。それはフォトショップが月額料金制でまったく操作が出来なくても毎月お金だけ取られてくから。なのである程度操作を覚えてから購入しようと思ってる。(´∀`*)ｳﾌﾌｯケチ臭いやり方だけど見切り発車しても上手く行った事があまりない。|ω･`)ｼｮﾎﾞｰﾝしかしどう勉強すればわからないので勉強方法から検索してみた。すると本を買うのが１番良い方法だと解った。〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓【ネット検索】でも俺はその本すら買う事をケチってネットの記事で学ぼうとしてみた。まず検索したのがフォトショップの操作説明書。°˖☆◝(⁰▿⁰)◜☆˖°これは公式ホームページにあったのでとりあえず読んでみる事にした。俺はGIMPと言うソフトなら一通り操作が出来るので書いてある事が大体わかる。そう思い込んで余裕かまして読んでみたら全然解らない。何が解らなかったのかと言うと色々な操作の名前がGIMPと全然違っててよく解らなかった。そこで解らない言葉の意味を１つ１つ調べて勉強してみた。( ´Д｀)=3 ﾌｩ〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓【チュートリアル】でも結局よく解らず「これじゃ本を買っても書いてある事が解らず無意味だな」そう感じてしまった。そこで更に検索してみると公式ページにチュートリアルと言う操作手順の動画があった！試しにその動画を見てみると凄く解りやすい！(*´▽｀*)そう俺が求めていた物はまさにこれだったのだ！しかも動画の下に操作手順が書いてありなかなか覚えやすかった。ヾ(o´∀

というか正確にはライブMVでして、生演奏を映像作品にしたって感じ。ライブなので1台のカメラで何回しかする当てフリ撮影と違い複数カメラが必要。今回用意したカメラの台数が4台。足りない…。急遽、自分とアシスタントのiPhone2台を補助的に使うことにしました。高級カメラとiPhoneの映像、編集でどのくらい近づけられるか試したかったので良い機会を頂いた。もちろん依頼主から了承を得て行っております。まずはSonyのカメラ↓さすがです、Sony。iPhoneの映像↓うーん。。。色が全然違いますね。コントラストも高すぎてディテールが潰れまくってます。彩度も高すぎ。iPhoneで撮った映像はiPhone自体の画面で見るときれいですがPCの画面で見るとノイズが多いです。これだけ違うとアングルが変わるたびに色の違いが気になって見る人からしたら曲に集中できないですよね。とりあえずトーンカーブでコントラストを下げて色温度、色被りの調整。あと赤がやたら出ているのでそこも調整したら↓おお！1枚目のSonyの色にだいぶ近い。シャープさも戻ってきた。あと少し黒を締めるとかなり良さそう。以上、頑張ればiPhoneでも最新ミラーレスカメラに近づけることは可能。この調整だけで2時間くらいかかったけどな！

はじめまして。最近ココナラを始めたやつきと申します。 僕は、YouTubeの動画編集、歌ってみたのMIXを５件の方まで最低額でするという事を実施しております。気になった方はぜひ覗いてみてください。よろしくおねがいします。 　さて、ここからが本題です。 今回はAviutlで有料ソフト並みの高クオリティのテロップを作る方法を紹介します。 　 とても簡単にできるのにまだまだ知っている人は多くもないようです。ということでこのブログでpremiere proや有料動画編集ソフトで使われているテロップをいくつか紹介していこうかと思います。  ①シャドーを入れたテロップ １つ目は「シャドーを入れたテロップ」です。 ジャンルとしては黒背景が多いエンタメ系やVlogに良く見るものです。 ここで早速ですが、皆様テロップを入れて見直したときに「テロップに違和感を感じる」ことは有りませんでしたか？ こういう感じですね。 違和感の大きさはフォントによって異なってきますが。 これだとなんとなく見ずらいですよね。なにかあじけない。そこで何をするか。「シャドー」を追加します。 各種値はx値とY値を「０」にします。濃さと拡散はお好みで。 すると下のようになります。 違いがおわかりいただけたでしょうか？念の為背景白のものも投稿しておきます。 こんな感じで周りに黒影がつきくっきり浮き上がって見やすく、りっちなテロップになります。 この文字色を白、シャドーの色を黒にしたこのテロップはバラエティではなく少しクールでおしゃれな雰囲気のエンタメ系で動画の中に静かに出す時がとてもマッチングします。 　また、ちょっと