プログラミング知識0ではじめられる、UE4で簡単HPとMP作り!

こんにちは、インターン生の西井遥です。

最後は、前回予告していたように「HPとMPの実装」という、前回作ったモーションをするとMPが減る。というものを作っていきます!
ちなみに、今回は今までやってきたことのおさらいと、作ってきたものをすべて使います!

では早速やっていきましょう。

まずはじめに、タイトル画面と同じく、ウィジェットブループリントを使ってHPとMPのバーを作ります。(今回はウィジェットブループリント名をHPMPにしました。)
「CanvasPanel」にパレットから必要なものを持ってきます。
今回は、パネル内にある「HorizontalBox」という箱になるものを入れ、その箱の中に、同じくパネル内の「VarticalBox」という整列に便利な箱を2つ用意しておきます。

1つ目の「VarticalBox」内に「Text」、2つ目には「ProgressBar」をそれぞれ2つずつ入れます。

ここで一応、「HorizontalBox」の大きさや位置を、想定するHPMPバーの大きさに変えておいてください。

「Text」にはそれぞれHP,MPと入力し、フォントやサイズを好きに調節してください。(sizeをフィル、垂直方向中央揃えにしておくと楽です。)
「ProgressBar」はsizeをフィルにし、「HorizontalBox」で大きさを調整してください。

その他、バーのカラー設定などを終えたら、右上の「グラフ」から、デザイナー画面をイベントグラフ画面に切り替えましょう。

ここでは、どのキャラクターに適応させるかを決めます。
右クリックで「GetplayerCharacter」ノードを追加し、ノード内にあるReturnValueのピンから「Castto〇〇Character」を呼び出します。
「Cast~」ノードの左側の白い実行ピンを、イベントノードの「Construct」(半透明で既に出ているノード)に接続します。
また、同じくノード内の「As~」からピンを伸ばし、「変数に昇格」を選択します。

一度コンバイルし、画面は閉じずにおいておきます。

次に、HPとMPを作ります。(今回HPを使わないので割愛します。参考サイトには載ってます。)
キャラクターブループリントを開きます。マイブループリントタブから、HPとMPの変数を追加していきます。
右の詳細で名前をMPとし、「Flort」変数型に変え、コンバイルします。
一番下にあるデフォルト値を決められるので「1.0」にします。(後でVarticalBoxとバインドさせるので、パーセンテージ100/100で最大値が1となります。)

そして、イベントグラフに移動し、前回やったようにウィジェットを画面に映すよう指示していきます。

※今回はレベルではなく、キャラクターのブループリントでウィジェットを表示させるよう指示します。

「EventBeginPlay」ノードを右クリックで追加し、ピンを伸ばして「CreateWidget(ウィジェットを作成)」ノードを呼び出します。
Classは先程作った「HPMP」ウィジェットに設定しましょう。
次に、ReturnValueの横のピンから「変数に昇格」を選択し、できたセットノードの青い方のピンから「AddtoViewport」を呼び出し、接続します。

ほとんど第2回のおさらいとなりましたが、うまくできたでしょうか?

コンバイルできたら、次はモーションの消費MPと残りMPの設定をしていきます。
同じイベントグラフ内にある、前回作った「Hi」のインプットアクションを使っていきましょう。

まず、先ほど作ったMPの変数をSetとGet2つ出してきます。
消費するMPを計算させるため、「flort-flort」ノードをSetとGetの間に入れます。
(セットのMPのピンをマイナスノードの右、ゲットのMPのピンをマイナスノードの左上にそれぞれ繋げます。)
マイナスノードの下の値は1回モーションを取るとマイナスされるMPとなります。(1が最大となるので今回は「0.25」とします。)
そして、「Hi」をした時にMPを消費させたいので、「インプットアクションHi」の先の、「isHi?」にチェックの入った方のノードと、セットのMPの白い実行ピンを繋ぎ、コンバイルします。

最後にバーの長さが残りのHPとMPに対応して変わるようにしていきます。
(今回ダメージを受けないのでHPの方は割愛します。)
HPMPウィジェットブループリントのデザイナー画面に移動し、MPの方の「ProgressBar」を選んで、詳細タブ内の「Progress」にある「Persent」のバインドをクリック。
subオブジェクトプロパティ→NewVer0(今回名前が違うかもしれません)→作った変数MPを選択し、バインドさせれば完成です。

最後にコンバイルして確かめてみましょう。

では、ここまで読んでくださりありがとうございました。

これで終わりですが、今まで難しくてできなかったことが、UE4で簡単にできるようになってもらえたら嬉しいです。
UE4の公式サイトのリソース、ドキュメントに他にも色々載っています。
興味があったら、もっと詳しい記事や本もでているので、是非色々チャレンジしてみてください!

【参考】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4

興味を持たれた方はお気軽にお問い合わせください。

私の絵を見てほしい~SNSの使い方~

初めましてこんにちは。
東京しごとセンターの企業見学に参加させていただいている、みやざきと申します。
今回はイラスト描きの自己表現方法について記事を書かせていただきます。

私の趣味は絵を描くことです。
好きなマンガやゲームのキャラのイラストを日夜描きながら生活をしています。
一人で描き続けるのもいいですが、せっかく頑張って描いたのなら誰かに見てもらいたいとは思いませんか?
そして、見てくださった方にコメントなどをいただけたら次の絵を描く活力になることでしょう。
ということで、自分で描いたイラストをいかに多くの方に見ていただくかについて、自己表現の方法を紹介します。
イラスト以外にも応用できるところはあると思いますので、絵を描かない方でも何か感じていただけるのではないでしょうか。

■SNS
ソーシャル・ネットワーキング・サービス。
第一回目のテーマです。
今や一番手っ取り早く簡単に自分を表現できるツールではないかと思います。
TwitterやPIXIV、instagramなどがそれにあたります。
昔は自分でホームページをイチから作成して、サーチエンジンに登録したりなどなかなか地味な作業が多く
苦労してもなかなか伸びない閲覧数に涙したこともありましたが、こちらはアカウントを作成して、作品のキーワードや自分が感じた熱い思いなどをしたためて投稿することで、それを求めて検索している人にヒットして見て頂ける仕組みです。便利な時代になったものです。

 □Twitter

今回は私が主に使用しているTwitterについて書かせていただきます。
 Twitterは140文字までの短いメッセージをつぶやくことができ、その発信者に対して追跡(フォロー)、返信(リプライ)、つぶやきの検索などの機能を
 備えたサービスです。
 
 *フォロー :同じ趣味の人を「フォロー」することにより、自分が好きな作品やキーワードについての情報を得られる機会が増えます。
        フォローされることによって同じ趣味について語り合うこともできます。
        その交流から新しいインスピレーションを得たり、自分の作品をもっと見ていただくきっかけを作ることができるのです。
        そしてフォローされるとその人のタイムラインに登録され、自分が発表した作品をリアルタイムで知ってもらうことができます。
        フォロワーが多い方が見てもらえる可能性が高く、いいねやリツイートの頻度が上がります。

 *いいね  :気に入った作品やツイートに評価をつけることができる機能です。リストにまとめ後から見直すこともできます。
        いいねをされた通知がリアルタイムに届くので、モチベーションが上がります。
        ダイレクトに作品を見てもらえているという実感が得られて良いです。
        見てもらう・評価してもらうというこの記事のテーマにおいて、特に大きなポイントの1つです。

 *リツイート:ツイートを自分のタイムラインに引用して拡散することです。
        自分をフォローしている人以外にも作品を見てもらえる機能です。感動した作品を誰かと共有したいときに使います。
        自分の友達だけではなく、友達の友達にまで噂が伝播していくイメージです。
        自分だけの力はちっぽけでも、他人に評価され拡散されることで見てもらう機会は格段に上がります。
        また、自分で自分のツイートをリツイートすることもでき、繰り返しタイムラインに表示することで、その時タイムラインを
        見ていなかった人にも見てもらう工夫もできます。
        自分が気に入ったものを拡散することが多いので、いいねと並ぶ大きなポイントです。
 

 *キーワード:いくらいい作品を作っても見てもらえないことには何も始まりません。
        そこで検索機能を上手く使い、見てもらえるように働きかけましょう。
        自分の好きなこと、何を思ってその作品を作ったのか。作品のテーマなどを作品と一緒にツイートすると
        それを求めて検索した人にヒットする仕組みです。
        見つけてもらいやすい仕組みを模索しながら、キーワードも作品のうちと考えて作るといいと思います。

SNSを通じて多くの人自分の絵や作品を見てもらうことは、イラストレーターやデザイナーだけでなく多くの人に興味があることかと思います。
私が挙げたのはほんの一例で、様々な考え方があると思います。この記事をきっかけにして何か考えていただける機会になればいいかと思います。
では次回はリアルイベントについてお話させていただきます。

よろしければチャンネル登録、高評価をおねがいいたします!

興味を持たれた方はお気軽にお問い合わせください。

完全初心者の「スクラッチ」

初めましてこんにちは!インターン生の春日です。インターンシップの活動の一環ということで、何回かにわけて「スクラッチ」というプログラミングソフトについて記事を書かせていただきます。よろしくお願いします!

1.スクラッチとは?
まずはスクラッチとは何かというところからお話します!
スクラッチとは、マサチューセッツ工科大学メディアラボのライフロングキンダーグループというグループのプロジェクトにより開発された子供むけプログラミングソフトのことを指します。(DJや宝くじではありません!)
子供むけプログラミングソフトということもあり、小難しいプログラミング言語などを使用せずにプログラミングを体験することが出来るものです。
スクラッチはホームページから簡単にダウンロードすることもできますし、webサイト上で動かすこともできます。
そして無償提供なので、「プログラミングに興味があるけど言語とかよくわからない…」「とりあえずプログラミングをちょっと試してみたい」といった初心者の方におすすめですね。

……実のところ私も初心者です。正直プログラミングについては一切わかりません。プログラミング言語は名称だけの知識で、ソースやコードなんて書いたこともありません。よくある「なんちゃって未経験」とか「なんちゃって未実績」とは違う「完全なる」初心者です。そのためインターンシップで知るまではスクラッチというものを知らなかったし、ほんとに初心者でもできるのかちょっと気になってます。
とはいえ今回こういう機会をいただくことになったため、この世界のどこかの「プログラマー完全初心者」の人の後押しができるように頑張っていきたいと思っています。よろしくお願いします!

2.チュートリアル!

今回は第一回ということもあり基本的な説明だけの予定でしたが、少しだけチュートリアルのお話もしちゃいます!
……というわけで早速公式さんで公開されているチュートリアルを体験しました!

(画像が小さくてごめんなさい…!)

この写真はチュートリアルに沿って実際に私が作ったプログラム画面で、一枚目の写真に写っている緑色の旗を押すとプログラムの読み込みが始まります。ネコやクマが小さく動きました!
形式としては既存のプログラムをつなげてアニメーションなどを作っていく形式でした。チュートリアルということもあり、基本的な動きしかありませんがプログラミング完全初心者でも出来るほど実に簡単でした。
正直あまり難しいことはできない印象でしたが、まだ一番最初のチュートリアルが終わっただけです。
次からはオリジナルプログラムの作成をブログのような形でまとめるつもりですので、よろしくお願いします。

興味を持たれた方はお気軽にお問い合わせください。

仮想通貨について

なぜ私たちは日常生活でビットコインを使用できないのですか?

みんなさん、こんにちは. 今日はビットコインについて話したいと思います。
いろんな仮想通貨の人気が高まっていますが今日はビットコインとして知られている最も古い仮想通貨についての話でございます。
まず、ビットコインとは?
ビットコインは2009年に作成された分散型通貨です。 分散型通貨なので中央銀行やその他の行政は存在していません。 ビットコインネットワークは同等のクライアントネットワークである。 ただし、同等のクライアントネットワークの場合は、保持するべきのデータは分散ストレージに保存する必要があります。 ビットコインのデータストレージはどのように実装されているかと考えると最も信頼性が高く簡単な方法で実装されていると思います。 全てのクライアントが全てのデータのコピーを所有しています。
このデーターを保持する方法はメモリが少ないデバイスには適していませんね。 このためたくさん色んなシンクライアントが作成されています。 しかし、シンクライアントは全ての情報を保持しないため、トランザクションを検証できません。
私たちは日常生活でビットコインを使えない理由があるかと考えるといくつかの理由が出てきますが、今回はビットコインが保持しているデータからの理由を発表したいと思います。
ビットコインはどいうデータを保持しているでしょうか?
ビットコインは保持しているデータが2009年からの全ての取引です。 非常に多いですね。 データーの量は2018年に150ギガバイト以上です。 1つのトランザクションの平均データー量は250バイトになっています。
もし、ビットコインを日常生活で使えば?
現在の日本の人口は約12700万人です、もし、各人1つのトランザクションをすると、トランザクションのデータのサイズがおよそ29ギガバイト増加します。 毎日増加すると多くなりますね。 こんなにたくさんデータを保存するコストも高いと思います。 間違いなく、私たち日常生活でビットコインのような仮想通貨を使うのは難しいです。
もし、全てのトランザクションのデーターを保持しなければ問題がないでしょうか? このポイントを見るとビットコインと違うデザインになると思います。 他の仮想通貨になるじゃないでしょうか?
ですが、ビットコインもの仮想通貨もデータを保持する必要があるため、分散ストレージのデザインは非常に重要だと思います。
これで以上になります。
ご読み頂きありがとうございました。
興味を持たれた方はお気軽にお問い合わせください。

ルームとオブジェクト・スプライトを知ろう(前編)

こんにちは、鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第3回テーマは
「ルームとオブジェクト・スプライトを理解しよう(前編)」です。
お待たせしました、いよいよGMSを使って実際にゲームを作っていきますよ!
テーマを読んで、ルームって何?スプライトとかオブジェクトって一体!?と思ったそこのアナタ。慌てなくても平気です。
どれもGMSを使う上で基本になる要素ですが、順番にひとつずつ説明していきますね。

・ルームとは何か?
とりあえずGMSを起動して、前回最後の画面に行きましょう。

新しくゲームのプロジェクトを作るには、中央のボタンのうちNewをクリックします。
プロジェクトファイルの名前を聞かれるので、好きな名前を入れてOKを押すと…

こんな感じの何もない画面が出てくるはずです。
…いや、何もなさすぎじゃない!?と思うかもしれませんが、実は既に用意されているものがあります。それがルームなんです。
画面右側になんだかずらずら並んでる一覧がありますよね。
これはリソースツリーと言ってゲームの色々なデータをしまっておく棚のようなものです。(Unityなどを触ったことがある人は見覚えがあるかも?)
その中の「Rooms」の欄の文字が明るくなっている…つまり、中に物が入っています。
Roomsの左の三角をクリック(または文字をダブルクリック)して開いてみましょう。

何かありますね!これをさらにダブルクリックで開くと、中央に何か四角いものが出てきます。これがルームです。
で、ルームってなんなの?という話に戻りますが。実はこれがゲームの画面そのものなんです。
このルームの中にキャラクターを置いたり障害物を置いたりして、プログラムで命令してやることでゲームができていくんですね。
ですが、初期のルームには当然何も置かれていません。そこで、試しにオブジェクトを作って置いてみましょう!

・オブジェクトを作る、置く
オブジェクトは日本語に直すと「物体」。
ざっくりしすぎていますが、操作するキャラクターや障害物などゲームに登場するモノは大体オブジェクトと思えばOKです。
ではオブジェクトを作ってみましょう。リソースツリーのObjectsの欄を右クリック「Create Object」を選びます。

これだけでオブジェクトができました。

オブジェクトを作ったことで、作業画面がルーム画面からオブジェクトの設定をする画面に切り替わりました。
作ったオブジェクトに色々な項目がありますが、面倒なのは後回し。早速ルームに配置してみましょう!
作業画面の上のタブ(Workspaceとかroomとか書いてあるところ)のroom0をクリックしてルーム画面を表示します。
(画面切り替えはよく使うので覚えておきましょう)

リソースツリーから今作ったオブジェクトをルームにドラッグすると配置できます。やってみましょう。

…どうでしょうか。小さい?マークが出てきたと思います。別にこれはバグでも何でもありません。
この?マークは「オブジェクトにスプライトが設定されてないから、見た目がわからないぞ!」ということを表すマークなのです。
スプライトが設定されていないオブジェクトは、ルームに配置しても実際のゲーム画面では目に見えません。
そう、まだ説明していなかったスプライトとはズバリ「見た目の設定」のことなんです。

・スプライトを作る、オブジェクトにスプライトを設定する
前の項で「スプライトは見た目の設定だ」と説明しました。では、実際にスプライトを作ってオブジェクトに設定してみましょう。
リソースツリーのspritesを右クリック、「Create Sprite」を選びます。

スプライトの設定画面が出てきました。
画面の説明をすると、左側がスプライトの名前やサイズ、その他当たり判定など細かい設定をする欄、
右上上段がスプライトの絵と、アニメーションで動く絵の場合コマの一覧。
右上下段が現在選んでいる絵(コマ)のプレビューです。

まずは左側の上の方にある「Edit Image」をクリックしてみましょう。
ペイントツールっぱい画面に切り替わったと思います。この画面ではスプライトを描くことができます。
(ちなみに、Edit Imageの下にあるImportから自分が持っている画像ファイルを読み込んでスプライトとして使うこともできます)
右のほうに並んでいるのは色の選択や描画ツールです。一般的なペイントツールと似た感覚で使えると思います。
ツールボックスの丸のマークをクリックして丸を描いてみましょう。

見やすくするためにグリッド線(黄色い丸で囲ったボタン)を有効にしましたが実際の見た目には関係ありません。
図形ツールは左上部分をクリックで中抜きの図形、右下部分をクリックで中まで塗られた図形が描けます。今回は中まで塗られた図形にしてみました。

これで白い丸のスプライトができましたが、ここでとても重要な確認があります。
Workspaceタブからさっきのスプライト設定画面に戻り、
右下のプレビュー欄の上にあるプルダウンメニューを「middle Centre」に設定しましょう。

これはこのスプライトの中央はどこかを設定する項目なのですが、
これがズレていると「キャラが画面に表示されている場所と実際にいる場所が違う!」となってとても面倒です。
「スプライトを作るときは中央を確認」これは絶対に覚えてください!!

・プロジェクトを保存する
ここまでできたら、一度ここまでのプロジェクト(作業)を保存しましょう。
多くのツールと同じようにGMSの保存はウインドウ左上のFileタブから行います。
「Save Project」が上書き保存、「Save Project As」が名前をつけて保存です。
保存したプロジェクトを開いて再開するときは、同じくFileタブの「Open Project」から開きたいプロジェクトのyypファイルを選びましょう。
(スタートページのNewの右にあるOpenからでも同じようにプロジェクトを再開できます)

・まとめ
スプライトもできて、あとはこれをオブジェクトに設定するだけ!というところなのですが、
詰め込みすぎもよくないのであえて今回はここで終わりにします。
ルーム・オブジェクト・スプライトと用語が色々出ましたが、
ゲームを作る上で基本的な部分になるのでしっかり覚えて次に進んでもらいたいと思っています。
明日の内容は今日の続きになるので作ったプロジェクトは保存しておいてくださいね。

※記事中の画像はすべてGameMaker Studio 2の実行画面のスクリーンショットを加工したものです。

プログラミング知識0ではじめられる、UE4で簡単モーション作り!

こんにちは、インターン生の西井遥です。

今回は、前回作ったアニメーション(モーション)をつかって、「キーを押すとモーションを実行する」をやっていきたいと思います!

まず、どのキーを使うかを決めましょう。
「編集」の「プロジェクト設定」→「インプット」にいき、そこにある「ActionMappings」の横の「+」をクリックしてください。
新規アクションマッピングが追加されるので、前回作ったアニメーションと同じ名前を付けてください。キーは好きなキーを選択してください。
今回は「Z」キーに設定しました。

ここからブループリントによる作業なのですが、色々なところを行き来するのでしっかりと確認してください。

まず、キャラクターブループリントを開き、変数を作っていきましょう。
左のマイブループリント上にある変数の横「+」を押し、新しく作った変数に名前を付けましょう。ここでは「is Hi(ここはアニメーションの名前で)?」とします。
これは、「Hi」をしますか?しませんか?という設定をするものになります。

できたら、同じくキャラクターブループリントのイベントグラフに移動し、右クリックでイベント「Hi」のノードを作ります。(「Hi」で検索するとアクションイベントとして出てきます。)
その横に、「isHi?」変数をsetで2つ並べ、1つに「isHi?」に対してYesを表すチェックを入れます。チェックを入れた方を「Pressed」、入れていない方を「Released」にそれぞれつなげます。

コンバイルして、キーに対する指示ができたので、キャラクターのブループリントは完成になります。

次はアニメーションブループリントを設定していきます。ここでは、だれが、どのアニメーションを、どのように取るのかを指示していきます。
アニメーションブループリントはMannequinのAnimationフォルダーに入っています。(AnimBP)

まず、新しい変数を準備します。先程と同じ手順で、変数「isHi_CA?」(を作っておきましょう。
次に、イベントグラフ内に既にある「TryGetPawnOuner」というノードの「ReturnValue」ピンから「Castto〇〇Character」というノードを繋げます。
そして、「As~」と書かれた青いピンから、どのアニメーションを持ってくるかを指定するため、「isHi?」の変数をGetで繋げます。

これが出来たら、変数「isHi_CA?」をSetで呼び出し、これに「Castto~」と「isHi?」ノードのそれぞれ同じ色のピン同士を接続します。
あとは、同じイベントグラフ内にある、「Setting”Speed”」の「セット」ノード右側の白い実行ピンと、「Castto~」の左側の白い実行ピン同士を接続します。

コンバイルできたら、イベントグラフの設定は完了です。

次にモーションの設定をしていきます。

まず、同じアニメーションブループリントにある、「Default(ステートマシーン)」のページに移動します。(マイブループリントのアニムグラフから飛べます。)

見て分かる通り、連続するアニメーションのつながりを決めていきます。

今回は「Hi」はIdle時にしたいため、「Idle/Run」につなげていきたいと思います。

「Idle/Run」上からドラッグし、ステート追加を選びます。ステート名はモーションの名前を付けましょう。(今回は「Hi」にしました)
同じように、今作ったステートからドラッグし、「Idle/Run」に帰る矢印も作ります。

そのあと、「Hi」ステートをダブルクリックし、「Result」ノードのあるページに飛んだら、右クリックから「Play」と検索し「再生Hi」を選択します。
人のアイコン同士を接続したら、アニメーション再生の設定は完了です。

最後に、「Default」に戻り、アニメーション間の行きと帰りの決定をします。それぞれ、行きと帰りの矢印の横にある丸い印をダブルクリックし飛んでください。
行き(Idle/RunからHiへ)は「isHi_CA?」をGetで、すでに用意されている結果ノードに繋げてください。
帰り(HiからIdle/Runへ)はモーションが終了したかを確認させたいので、右クリックで「TimeRemaining(ratio)(Hi)」ノードを作り、ReturnValueピンから「flort<flort」という小なりを意味するノードを呼び出してきます。数値を0.1と設定し、これを結果ノードと接続します。

コンバイルしたら、すべての工程が完了しました。

※前回、キャラクターのビューポートを「None」にしたままの人は、元々のAnimに戻すと動きます。

少し難しかったでしょうか?お疲れ様です。

次回で最後となりますが、最後は「HPとMPの実装」という、今回作ったモーションをとるとMPが減るものを作っていきます!

では!

【参考】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4
・Chara@Mayaライブ!~キャラクターセットアップからUE4への出力~
(URL:https://area.autodesk.jp/movie/cedec-2017/chara-maya-live.html

興味を持たれた方はお気軽にお問い合わせください。

第5回webのひみつ(cssについて)

皆さんこんにちは。
インターン生の明瀨と申します。

今回はCSSについてまとめていきたいと思います。

まず、CSSでの役割はHTMLで書いた内容をCSSを使用して体裁を整えていく際のレイアウトやデザインに関する情報を書くものとなっています。
これはCSSを使用しなくてもHTMLに直接指定すれば出来るのですが、ごちゃごちゃになってしまいすごくわかりずらく、役割を分けて使用していくために、利用されました。
現在のHTML5ではなどのstyleの指定のタグなどは廃止されて、CSSでしているのが今の基本となっているそうです。

次にCSSの大事な要素について書いていきたいと思います
p{witdh:10%;}:
上記のタグがあったとします。
こちらの左から、
p=セレクタ
witdh=プロパティ
10%=値
の三つの要素を書いていくことが主な基本的な書き方となっています。
しかし、htmlの方で、

と指定があったとき、
cssでは
.tamesi a{}
のセレクタの部分にdivのclassを指定したあとに、テキストの指定をしたかったので、aを追記するといったように、少し基本と違う書き方もあるので、こちらも学んでみてください。
その他にも様々な要素があります。
次にその要素うち良く使うものについて書いていきたいと思います。
まず、よく使われるのはwidthです。
こちらは幅を指定する際に使用するものとなっています。
それと一緒に使用するのは高さを指定するheghtというプロパティです。
この他にも、余白を決めるmargin、要素の配置一を指定するposition、要素の表示形式を指定するdisplayなどが存在しています。
また、これらの要素は
p{
height:10px;
width:20px;
margin:25px;
position:fixed;
float:left;
}
のように組み合わせて使うことで、今回の場合は高さ10px、幅20px、余白が25px、配置位置が画面のスクロールに合わせて固定、配置位置が左側のように詳細に指定して要素を移動させたり、浮かせたり、はたまた、消したり出来るので、これらのプロパティをCSSを書いていくには、これらを覚えていくことが重要となってきますので、覚えてみて下さい。
これ以外にもまだまだあるので、調べてみて下さい。

今回はこの辺で終了にしたいと思います。次回は、CSSでのアニメーションなどについて書けていけたら書きたいと思います。閲覧ありがとうございました。
良ければまた見て下さい。

興味を持たれた方はお気軽にお問い合わせください。

TypeScriptについて

タイプスクリプトのメリット。

ウェブページがだんだん複雑なっている今の世界では、JavaScriptコードの量が増えています。
このため、ウェブプロジェクトのソースコードのデバッグは困難になっています。 今日はタイプスクリプトというバグの一つの対策につい話したいと思います。

タイプスクリプトとは?
タイプスクリプトとは、JavaScript(EcmaScript 3+)にコンパイル出来るJavaScriptのオープンソースの構文上のスーパーセットです。 タイプスクリプトは、コンパイル時にオプションの静的型チェックを行っています。 JavaScriptのスーパーセットなので、すべてのJavaScriptは構文的に有効なタイプスクリプトです。
コンパイル時どいうチェックを行われていますか?
主なチェックは
 -変数のタイプチェック
 -関数のパラメータ数 とパラメタータイプ
これ以外もいろんなチェックを行っています。

どいうバグの対策になれるでしょうか? 大規模なJavaScriptプロジェクトを想像してください。 たとえばそのプロジェクトの中によく使われている関数があります。この関数はパラメータとして電話番号を受け取って、電話番号が有効かどうか判別し、ブール値を返します。 ある日ビジネスニーズでその関数のパラメターに地域という1つのパラメータが追加されました。 ですがプロジェクトが大きいなのでその関数が呼び出される場所の修正を漏れてしまう可能性があります。 でも漏れてしまうとバグが出ます。このバグの対策として関数のパラメータ数 とパラメタータイプのチェックが適しています。

タイプスクリプトは効果があるでしょうか? 私の経験からJavaScriptアプリケーションでは変数のタイプや値を間違ってバグを作るのは簡単なので、タイプスクリプトは非常に助かります。 バグの約30% を自動で示してくれます。

大規模なプロジェクトを修正できない!確かに大規模なプロジェクトを修正するのは難しいですが、
同じプロジェクトではタイプスクリプトとJavaScriptを一緒使えるので最小限の変更から進められるとおもいます。
興味を持たれた方はお気軽にお問い合わせください。

GMSを入手しよう

こんにちは、鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第2回テーマは「GMSを手に入れよう」です。
いよいよ実際にGMSを使ったゲーム制作に取り掛かれる!?……でもその前にちょっと深呼吸。
GMSを使うためには、「YoYoアカウントの登録」と「GMSのダウンロード・インストール」が必要です。今回はその方法について説明します。

・YoYoアカウントの登録
まず、GMSを提供しているYoYoGamesの公式ページに行きます。

トップページ右上にある、人型のアイコンをクリックしてみましょう。

YoYoアカウントのログイン画面に来ました。
今回は新しくアカウントを登録するため、右側の「SIGN UP」ボタンをクリックします。

アカウント登録画面です。

左側の欄に上から
・メールアドレス
・メールアドレス確認欄(上と同じものを入力しましょう)
・あなたの名前
・あなたの苗字
・住んでいる国
・誕生日(日・月・年の順)
を入力し、右側に
・設定したいパスワード
・パスワード確認欄
・秘密の質問(プルダウンで選びましょう)
・秘密の質問の答え(質問を選ぶと出てきます)
を入力し、reCAPTCHAのチェックとその下のチェックボックス(利用規約を読んだことを確認する欄です)にチェックを入れ、登録をします。

これでアカウントが登録されました…が、まだ仮登録の段階で本登録はされていません。
設定したメールアドレスに届くアカウント認証のメールを読み、リンクをクリックすることで本登録が完了します。

ダッシュボード画面(ログイン後左側のタブの1番上をクリック)の緑色のメッセージが消えているのを確認できればOKです。

・GMSのダウンロードとインストール
ログイン画面左側のタブのGAMEMAKER→Downloadを選びます。
GameMaker Studio 2が選択されていることを確認して、自分の機種に合わせたDOWNLOADボタンをクリックしてください。
インストーラーがダウンロードできます。
(GameMaker:Studio1.4は旧バージョンです。今から始めるなら2を選択しましょう)
ダウンロードされたインストーラーを起動し、指示に従ってGMSをインストールしましょう。

・GMSを起動!
指示に従っていればデスクトップ画面にGMSのショートカットアイコンができているはずなので、
それをダブルクリックで起動してみましょう。

こんな感じの画面が出てくると思います。
ここにさっきアカウントを作った時のメールアドレスとパスワードを入力して「Login」ボタンでログインしましょう。
(ユーザーネームを設定してね!と言われるかもしれませんが無視してログインしても問題ありません。)

ログインがうまくいってこんな感じの画面が出てきたら成功です!いよいよゲームを作る準備が整いました!
……というところで今回は終了です。準備の時点でなかなか大変ですが、次回からいよいよゲームを作り始めますよ!

ここまで読んでいただきありがとうございます。次回もお楽しみに!

・画像引用元
<https://www.yoyogames.com/>
および、GameMaker Studio 2の画面スクリーンショット

興味を持たれた方はお気軽にお問い合わせください。

プログラミング知識0ではじめられる、UE4で簡単モーション作り!

こんにちは、インターン生の西井遥です。

今回も、前回予告していた通り「UE4上だけでキャラクターモーション」を簡単に作っていこうと思います!

Mayaで作って持ってくる方法もありますが、今回はUE4上だけで作成します!
(SideScrollerプロジェクトですが多分他のも大体同じだと思います。)

※バージョン4.17でやっています。今回使う機能は4.16以降のバージョンでないとできません

まず、アニメーションを作るために上のバーの「編集」から「Plugins」を選びます。
そこから「Animation」→「ControlRig」にいき、チェックを入れます。

適用し、UE4が再起動したらまず、もともとのキャラクターに動きが付いており、編集しにくいのでアニメーションを切ってしまいます。
「~BP」というフォルダの中の「Blueprints」に入っている「~Character」のブループリントを開きます。
真ん中のタブに「ビューポート」があり、その中に表示されているキャラクターをクリックしてください。
クリックした後、詳細タブの「Animation」の「AnimClass」を「None(なし)」にします。
コンバイルすると、ビューポート内のキャラクターが動かなくなり、初期のポーズ(バインドポーズ)になります。

再起動後はモードに新しく「Animation」アイコンが追加されています。
これをクリックし、開いたタブから「Actor」を指定して(スポイトを使うと早いです)、シーケンスを作っていきましょう。

「Sequence」の「なし」と書かれたところクリックし、「ControlRig Sequence」を選び、名前を付けて保存してください。(今回は名前を変更していません。)

すると、シーケンサーウィンドウが出てきます。下になったウィンドウの左には「Controls」にリグが表示されていると思います。

シーケンサーの「Track(追加)」から「ControlRig」→「BaseHuman」を選びます。
すると、下に「BaseHuman」のタイムラインができます。

ここからは普通にAfterEffectsなどで作るのと同じように、キーを入れてアニメーションを作っていきます。

動かしたい部位は、「BaseHuman」の横の「+」から追加できます。
(左のリグをみてIKかFKどちらで動かすか確認してください。)
Controlのリグを選び、真ん中の画面上のキャラクターをそのまま動かすか(「表示」の横にある3つのアイコンでそれぞれ「移動」「回転」「拡大縮小」ができます)、シーケンサーで位置、回転、スケールの値を変えることによりキャラクターを動かすことができます。

※アニメーションを作ったことない人へ簡単に説明
このアニメーションは「初期モーション(0秒)の位置から30フレーム後に左腕をこの位置に上げる」という風に指示をしアニメーションを作っていきます。
その指示のことを「キー」といい、タイムライン上にある丸い印がそれです。
白い線(シークバー?)を動かして秒数を決めます(正しくはフレームです)。
BaseHumanのBoundの下についている、追加した部位(IK~FK~など)の右に表示されている「+」アイコン、「新規のキーをここに打つ」をクリックするとキーとなります。
これらの指示を組み合わせて、アニメーションを作ることができます。

シーケンサー上の再生ボタン(プレイ)を押すと、今作ったアニメーションを再生して確認することができます。

アニメーションがつくれたら、シーケンサーの左下にあるアイコンで、アニメーションの開始と終了を設定します。(出てくる線の緑が開始、赤が終了です)

できたら虫眼鏡の横にあるエクスポートアイコンを選択、スケルタルメッシュはMannequinを選択します。
※自分のキャラを使用している方は、そのキャラクターのメッシュを選んでください。
「AnimationSequence」は新規アセットのアニメーションシーケンスを選び、作成します。名前を付けて保存してください。
(今回は、手を上げるような動作なので、「Hi」と名付けました。)
Convertで保存完了です。コンテンツブラウザ上に新しいアニメーション「Hi」が追加されました。

これでアニメーションが完成です!

もし、自分のキャラクターを使っていて、関節の曲がり方などが気になる所がある場合はウェイトを付け直して再インポートするといいかもしれません。

(調整前(上)と調整後(下))

一応UE4上のブラシツールにウェイトペイントがあるのでそちらでも付けられるかもしれません(やったことないです)。

以上です!
簡単にできましたか?

次回は今回作ったアニメーションを使って「キーを押すとモーションをする」をやっていきたいと思います!
既にWASDで移動はできますが、自分で作ったモーションをキーに割り振ってみる作業です!

では!

【参考サイト】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4
・[UE4]Control Rigで簡単なモーションを作成する。 – NazeNani
(URL:http://nanyatti.wp.xdomain.jp/2017/07/15/ue4control-rig%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AA%E3%83%A2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%80%82/

興味を持たれた方はお気軽にお問い合わせください。