Live2D用イラスト制作

 こんにちは、インターン生の逸見です。第2回目の今回は、Live2Dで動かすイラストの制作方法について紹介させていただきます。

 Live2Dでアニメーションを作っていく上で、元となるイラストは動かすことを想定して作っていく必要があります。それを想定しなければ、動かそうとしたときに思うようにいかなくなってしまいます。そこで、今回は動かすところで失敗しないような、Live2D用のイラストの制作方法のコツをご紹介します。

 今回こちらの正面を向いているイラストを使用して紹介を行っていきます。正面を向いている場合、顔の半分を作成しておき、それを複製して反転することで左右対称なイラストにすることができます。作成時間の短縮やこの後にあるアートメッシュの編集がやりやすいといった利点があります。

 一見、Live2D用にどう作ったかわかりませんが、イラストのパーツを分解していくと通常のイラスト作成との違いがわかります。

 まず、髪の毛についてです。髪の毛は、このイラストでは3パーツで構成されています。アニメーションで別々に動かしたい部分はパーツ分けをしておきます。ここでは顔パーツの後ろに配置するための後ろ髪、前髪とは別に動かすために横の髪を分けました。

 次に、顔パーツです。今回は単純にするため髪の毛の影が同じパーツになっていますが、髪の毛の影を別にすることでアニメーションのクオリティを上げることができます。顔パーツは、その上にある髪の毛が動いたときに見える部分がどこまでになるか考えながら作ることが必要です。また、鼻パーツはキャラクターの顔が上下や左右を向く動きをする場合は分けておきます。

 続いて、目のパーツですが、こちらについては第5回目で詳しく説明をするためそちらをご覧ください。

 口パーツについてです。口は上唇と下唇、口の中の3パーツで構成されています。唇のパーツが小さいと口を閉じた時に口の中のパーツが見えてしまうため、上唇と下唇で隠れるように作っていきます。

 眉毛のパーツについてです。こちらは片側を作り、反対側はそれを複製し反転させています。

 首パーツについてです。首パーツは顔が動いた時に終わりが見えないように少しながめに作っておきます。

 胸部のパーツについてです。首が動くことを想定し、前の部分に加え首の後ろの襟部分を別に作り、首パーツをはさむようなレイヤーの構成にします。また、動きに合わせてリボンも動くように分けておきます。

 最後に、腕パーツについてです。腕パーツは可動域を考え、動かしたときに胸部のパーツと離れてしまわないように見えていない部分も作ります。

 以上が今回使用するLive2D用イラストのパーツ構成になります。今回使用したイラストは単純でわかりやすいものでしたが、パーツ分けを細かくして部品を増やすことでより複雑なものを作ることができます。しかし、パーツを増やしていくことでアニメーション作成が難しくなり、うまく制御することができなくなってしまします。そのため、初めは単純な構成のイラストを作ってアニメーションをつけていき、慣れてきたらだんだんと複雑な構成のイラストでアニメーションの作成を行っていくことをお勧めします。よろしければイラスト作成時の参考にしてみてください!

 次回は、メッシュの編集について紹介していきます。次回もよろしくお願いいたします!

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

AIと絵について。

AIと絵について。

皆さん、こんにちは。 インターン生のエフゲーニーです。 読者の皆様におかれましては益々ご健勝のことと存じます。今日はニューラルネットワークと絵についてあるニュースを見たので伝えたいと思います。 絵を作成できるニューラルネットワークが存在しているを知っている私もびっくりしました。 まず、ニュースは:
オークションで売っていたAIによって作られた絵は推定が約7000-10000ドルだったが販売価格 は432,500 になりました。 

絵のリンクはこちらです:https://www.christies.com/lotfinder/prints-multiples/edmond-de-belamy-from-la-famille-de-6166184-details.aspx?from=salesummery&intObjectID=6166184

この作品は、フランスの起業家のグループによってオークションにかけられました。 ロットはフランスからの電話でオークションに参加した匿名のバイヤーに行きました。
ニューラルネットワークが画像を生成するの方法はちょっと複雑とお思います。 ニューラルネットワークが二つあります。 一つ目はGenerator です。 Generatorは、画像のセットに基づいて新しい画像を作成しています。 他のニューラルネットワークはDiscriminator と呼ばれています。 Discriminatorは、人間が作成した画像とGeneratorによって生成された画像との間の差異を検出しようとしています。 このシステムを動かし続けるとGeneratorによって生成された画像と人間が作成された画像の違いがだんだん少なくなります。
 
販売価格は高すぎだったと思いませんか? ニューラルネットワークは有名な画家ではなくて、ソフトウェアであり同じような画像を何千枚を生成出来るじゃないでしょうか。 でも、価格はこんなに高い理由があるかどうかと考えると考えられる理由が二つあると思います。 一番目の理由はこの絵はAIによって作成された絵の間にオークションで売っていた最初のものです。 二番目のは匿名の買い手は売り手との関係を持って、この絵を再販予定があるかも知れません。

これで以上になります。
いつもお読み頂きありがとうございました。

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

プログラムを動かしてみよう

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第6回テーマは「キーボードで動かせるオブジェクトを作ろう」です。
前回の第5回ではボールが一定のパターンで動き回るプログラムを組みましたが、今回はプレイヤーの操作に合わせて動くプログラムを作っていきます。

・右に動く(?)キャラ
それでは早速やっていきましょう。
今回はこんな感じのオブジェクトとスプライトを作ってみました。

私は絵が描けないのでヘンテコなキャラになってしまいましたが、スプライトには好きな絵や画像を使ってももちろん大丈夫です。(あまり大きい画像はおすすめしません)
作ったオブジェクトは早速ルームに置いておきましょう。

では作ったオブジェクトにプログラムを組み込んでみましょう。
前回の要領で、キャラオブジェクトの編集画面に行きEventsのAdd Eventボタンをクリック。
イベント一覧の中から、「Key Pressed」→「Right」 を選びます。

画像のようにイベントが追加されていればOKです。

このイベントはキーボードの右矢印キー(→キー)を押した時のイベントです。
この中にキャラが右に動く処理を作れば、「右にキーを入れると右に動く」という動きができそうですね。やってみましょう。
今回のような操作に合わせてキャラが動く処理には、Movementカテゴリの「Jump To Point」ブロックがおすすめです。

XとYという欄がありますが、Xの欄は横軸(左右)の移動、Yの欄は縦軸(上下)の移動に使います。
今回は右に動かしたいので、Xの欄にだけ10と入れましょう。(横のRelativeにチェックを入れるのを忘れずに!)

ここまでできたら、一度Runしてみましょう。

ここまでできたら、一度Runしてみましょう。

…右を押すとちょっと動くけど、すぐ止まっちゃって連打しないと動かない!となりませんでしたか?
実は、今説明したとおりのプログラムだとそういう動きになってしまいます。
仮にアクションゲームを作るなら、右を押している間は右に動き続けるようになっていたほうが絶対にいいですよね。
次の項でどうすればいいかを説明します。

・イベントを変更する -KeyPressイベントとKeyDownイベント-
一度テスト画面を閉じて、キャラのイベント編集に戻りましょう。
前の項で「KeyPressイベントはキーを押した時のイベント」と説明しましたが、実は正確には「キーを押した瞬間だけ発生するイベント」なんです。
そのため、右を押している間は右に動き続けるプログラムを作りたい場合はこれとは別のイベントを使わないといけません。

というわけで、KeyPressイベントを別のイベントに変えてみましょう。一度イベントを消して作り直して~でもいいんですが、もっと早い方法があります。
イベント一覧で別のイベントに変えたい項目(今回はKey Downイベント)を右クリック→Change Eventをクリック。
Change Eventを選ぶとイベントを作るときと同じように一覧が出てくるので、「Key Down」→「Right」を選びましょう。

これを使うと中身のプログラムを残したままイベントの条件を変えられます。

イベントが画像のように変わっていて、イベント内に右に動くプログラムが残っていれば成功です。もう一度Runしてみましょう。
うまくいっていれば、キャラが右キーを押している間なめらかに動いてくれるはずです!

・キャラを回転させてみよう
ついでにキャラが動きながらぐるぐる回転するようにしてみましょう。
今作ったKey Downイベントのプログラム画面に移って、キャラを回転させるための処理を探します。
回転処理が楽にできるのは、Instancesカテゴリ(ブロック一覧の上の方にあります)の「Set Instance Rotation」ブロック。
見つけたらドラッグしてプログラムに追加しましょう(今回は順番は関係ないので移動処理のブロックの上でも下でもOKです)

Angleの横に-10と入れ、忘れずにRelativeにチェック。Runしてみましょう。
動きに合わせてコロコロ転がっているような感じになれば成功です!

・左にも動かそう -イベントのコピー-
いい加減右にばっかり動かすのも飽きてきた!ということで左にも動けるようにしてみます。
でも、右キーのイベントと同じように左キーのイベントを作って、プログラムを組んで……とするのはちょっと面倒です。
そこで、既にあるイベントを中のプログラムごとコピーして複製する方法があります。
イベントを変更したときと同じ要領で、コピーしたいイベント(今回はKey Downイベント)を右クリック→Duplicate Eventをクリック。
Change Eventの時のようにイベントの一覧が出るので、複製した後のイベントの条件を選びます。

今作りたいのは左矢印キー(←キー)を押している間のイベント。つまりKey Down→Leftです。

イベントが増えていれば成功です。

でも、このままRunすると右を押しても左を押してもキャラは右に動いてしまいます。(興味があったらRunしてみてください)
そこでちゃんと左を押したら左に動くようにプログラムを直します。
複製で増えたLeftイベントをダブルクリックで選択して、プログラムを編集します。編集画面の上のタブで今どのイベントのプログラムをいじっているのか確認するのがおすすめです。

画像2枚目のように、移動処理ブロックのX欄を-10に、回転処理ブロックの角度を10に書き換えてみましょう。
これで修正は完了です。実際にRunしてみて、右を押せば右に、左を押せば左にキャラが転がっていれば成功です!

・まとめ
今回はキーボード入力に反応するプログラムの作り方と、作ったイベントを変更したりコピーする方法を紹介しました。
ゲームを作る上でプレイヤーの操作に対応した動きは絶対に必要ですし、制作が進んでプログラムが複雑になるとイベント管理がとても重要です。
ここまでの内容がマスターできていれば、GMS初心者から初級者にステップアップしたといってもいいかもしれません。
次回はゲームの演出面でとても大事な「スプライト切り替え機能」を説明します。お楽しみに!

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

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

第8回webのひみつ(divなどの指定)

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

今回は前回書いていた、オラクル社のホームページを見て、どのようなデザインがあるかを見たいと思います。
(参考HP)
https://www.oracle.com/jp/index.html

こちらが参考のホームページとなっています。

まず、こちらのサイトは以前書いていた、フレシキブルwebデザインになっており、スマホやPCなどの画面表示に応じてページを変化させることが出来ます。
また、こちらのサイトで良いと感じた点は、その変化をさせる際に@mediaを使い1600px、770px、500px、のようにいろいろなスマホサイズやPCサイズに対応させている点です。

そのほかにも、ページが見やすいように区切りを色々な方法で入れていたり、見てる人が飽きないようにコンテンツの中身をアイコンで表示したり、スライドのように表示したりなど細かな配慮がしてある点がすごくわかりやすく良いと感じました。

また、よくあるフッターの部分に企業の電話番号や公式ツイッターなどの固定しているフッターを作成していることで電話番号などがわからなくても素早く連絡や問い合わせなどができるため、利便性が高いものとなっているところも良いと感じました。

自分もこのようなHPを作成してみたいと感じています。ですが難しいので、一つ一つの要素の作り方をを覚えて作っていくことが大事だと思っています。

次に自分が興味を持った、ホームページのトップにあるスライドの簡単な作り方について書いていきたいと思います。
(参考HP)
http://blog.keisuke11.com/webdesign/css-slider/

今回はこのホームページを参考にして書いていきたいと思います。
こちらのサイトではdivを使用して作成しています。
まずdivを3つ囲むdivを作成しています。
その全体を囲んでいる,css-sliderのdivには表示する箱の大きさなどをしています。そしてこちらにはoverflowを入れてはみ出した分を隠すようにしています。(ここが大事)
そして次に、slide-itemの方を説明します。こちらには画像のサイズをsliderと同じサイズにしています。それをfloatにすることで横並びになるようにしてあり、これで3つの画像のスライダーの画像が用意してあります。

次にwappaerと指定してある部分について説明していきたいと思います。ここが一番大事で、これをwidthのサイズを300%にすることで、通常100%の箱の状態が現在300pxの幅となっているため、900pxの幅に変わっており画像がしっかりと格納されることになります、これをkeyフレームで300pxでの移動幅を加えていくことで、横スライドをする(実際には横移動を繰り返している)スライドの完成となります。

そのほかにも様々な方法で作成することができるため、また調べてみてください。

今回はこの辺で終了にしたいと思います。次回は最後のため、cssのことやhtmlに関することについてまた書けていけたらなと思います。

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

Live2Dの始め方 記事 LIVE2D

初めまして、インターン生の逸見です。
今回からはLive2Dでのアニメーションの作り方についてご紹介させていただきます。

近年、バーチャルユーチューバーの登場やソーシャルゲームでの採用というようにLive2Dの需要が高まっています。Live2D用のイラストやモデルを販売、購入することができる「2次マ」というサービスも存在し、Live2Dはどんどん身近なものになっています。
Live2Dサイト:https://www.live2d.com/ja/
2次マサイト:https://nizima.com/

しかし、Live2Dという名前は知っていても、それがどのようなものなのか詳しく知らない方もいらっしゃると思います。
そこで、第1回目はLive2Dがどんなソフトであるかを紹介していきます。

まず、Live2Dはイラストを動かしてアニメーションを作ることができます。そのため、そのイラストの絵柄を保ったままアニメーションを作ることができます。また、2Dでの立体表現が可能であり、3Dモデルを作る必要がないため、「イラストは描けるけど3Dは難しいかも…」と思っている方にお勧めです。特に、Live2Dでのアニメーションで重要になってくる要素の一つであるレイヤー構成は、普段デジタルでイラストを描かれる方にとってわかりやすいと思います。
また、Live2Dでアニメーションを作るときは、イラストのパーツを変形させて動かしているため、1コマずつイラストを描くわけではありません。そのため、イラスト制作の時に変形させるための準備を行えば、コマごとに何枚も絵を描く必要はありません。(詳しくは第4回で)

Live2D作品だけを見ると難しそう…と思われると思いますが、このようにソフトについて知っていけばLive2Dへ挑戦することのハードルは下がっていきます。そして、そのハードルがより下げ、Live2Dに挑戦される方が増えるようにこの記事を書いていきたいと思います。

次回からは以下のように進んでいきます。
第2回 イラスト制作
第3回 アートメッシュの編集
第4回 パラメータの設定
第5回 目のパーツについて
第6回 デフォーマーの追加1
第7回 デフォーマーの追加2
第8回 アニメーショ制作1
最終回 アニメーショ制作2

次回は、Live2Dで動かすイラストの制作方法について紹介していきます。次回もよろしくお願いいたします!

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

量子コンピュータについて

量子コンピュータ

皆さん、こんにちは。 インターン生のエフゲーニーです。 秋の日が続いていますが皆様いかがお過ごしでしょうか? 今日は量子コンピュータについて話したいと思います。 このテーマは難しそうので出来るだけ簡単に伝えます。
まず、量子コンピュータを知っていますか? 量子コンピュータは、量子ビットを使用し量子コンピューティングを実行するデバイスです。 量子ビットはキュービット と呼ばれています。
キュービット について簡単に言うと、同じ時に2つの状態 |0> と |1>にする事が出来るほど小さいものです。 しかし、キュビットの状態をチェックすると、結果は0または1になり、キュビットは測定結果と同じ状態になります。 量子論によると、キュビットはもつれられることが出来ます。 つまり、すべてのキュビットで一度の操作を行うことができます。 したがって、量子コンピュータは通常のコンピュータよりも高速になる可能性があります。 しかし、多くのキュビットを絡ませることは非常に難しいです。 
量子コンピュータの計算プロセスは、3つのステップがあります。 まず、システムを初期化する必要があります。 それからキュービットで量子演算を実行する。 このステップを行う時キュービットは同じ時に2つの状態 |0> と |1>になっています。 最後はキュービットの測定を行っています。 測定する時キュービットは|0> または |1> になるですけれど、計算を何度もを繰り返すと測定直前のキュービットの状態がだいたい明らかになります。
現在の量子コンピュータの量子もつれるキュービット数は実用に足りないけど、増えると以下の実用が可能になると思います:
 - RSAのような暗号化で暗号メッセンジャーを解読すること
 - 人工知能
 - 分子モデリング
 - 線形方程式を解く
次は量子計算やプログラミングを学びたい方へ
量子コンピュータを秋葉原で買えないですね。 非常に高いデバイスですが、シミュレータやクラウドが存在しているので、普通の人も学べます。Googleで「quantum computer emulator」を検索するとシミュレータがたくさんでてきます。 シミュレータはスタートのために良いと思います。 本当の調子コンピュータをどこか使えるかと聞かれたら、申し訳ないけど、科学者以外使えるクラウドを分かりません。
では、これは以上になります。
いつもご読み頂きありがとうございました。
興味を持たれた方はお気軽にお問い合わせください。

プログラムを動かしてみよう

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第5回テーマは「プログラムを動かしてみよう」です。
前回、「今回からゲームを作るよ!」と言いながら操作と用語の説明ばかりでちっともプログラミングらしいことをしていませんでしたが(ごめんなさい)、
今回からGMSのドラッグ&ドロップ機能を使ったプログラミングを説明していきますよ。

ところで、この記事では初心者向けの内容を9回でまとめるために「こうするとこうなる」のみをサラッと説明していきます。
そのため「なぜそうなるのか」についてはあまり深入りしません。気になる方は自分で調べてみたり、自分で数値やプログラムを自由に書き換えて試してみるのがいいと思います。

・プログラムのテスト(Run)
まずは前回やったのと同じように、丸いボールのスプライトを設定したオブジェクトを用意してルームに配置してみましょう。

こんな感じです。
ではいきなりですが、この状態で今作っているものをゲームとして作動させるとどうなるか試してみましょう。
画面上のタブのBuildをクリック→Runを選ぶと、ゲームとしての動作をテストすることができます。
(タブの下の並んでいるボタンの再生マークをクリックしたり、F5キーを押しても同じことができます)
出てきたウインドウを見てみると……当たり前ですが何も動いていませんね。

というわけで、今日はこの白いボールが動くようにします。
ボールを動かすには、ボールの中身であるオブジェクトにプログラムを仕込んでいきます。
ボールのオブジェクトを選んで編集画面に行きましょう。

・イベントの作成
前回説明がなかった、右側にくっついてるEventsという窓が今回の主役。
オブジェクトにプログラムを組む時は、まずこの下にあるAdd Eventボタンを押します。

なんだかズラズラと出てきましたが、これを使って「プログラムが作動するきっかけ」を決めます。
まずは一番上のCreateを選びましょう。これはルームに出現したとき、つまり一番最初に動くプログラムに使います。

イベントを決めるとイベント一覧の右に画面が増えます。これがプログラムを作る画面です。(見づらい場合はマウスホイールを押したままドラッグで位置を調整したり拡大縮小をしましょう)
右に並んでいるカラフルなアイコンが、自分でプログラムを書く代わりに処理をしてくれるブロックです。
このブロックをドラッグ&ドロップで並べて項目の数字を設定するだけで、ゲームの内部処理を作ることができちゃいます。
これがGMSの特徴であるドラッグ&ドロップ・プログラミングです。(言語でプログラミングをするモードももちろんあります)

・ブロックプログラミング
早速やってみましょう。
右のアイコン一覧をスクロールしていき、Movementというカテゴリの左上にある「Set Direction Fixed」ブロックを左の空白部分にドラッグします。
矢印の描かれたウインドウが出てくるので、右向きの矢印をクリックします。

これでボールが動く向きが右向きに設定されました。
ちなみに、もし間違えて違うブロックを出してしまったときはブロック右上の×ボタンを押してブロックを消しましょう。
出しっぱなしにしておくとプログラムの一部だと認識されてバグの原因になります。

次に、同じMovementにある「Set Speed」ブロックをさっきのウインドウの下側にドラッグしてみましょう。
2つ目以降のブロックは勝手に他のブロックと繋がっていきます。プログラムは上から下に処理されていくので、上にあるブロックほど先に処理されます。
処理の順番を間違えるとプログラムが台無しになってしまうこともあるので、ブロックの並びには注意しましょう。
Set SpeedのウインドウにあるType欄はDirectionのままにして、speedの欄に10を入力します。

こうなっていればOK。これでボールが登場した瞬間から、右向きに速度10で動き続けるというプログラムが完成しました。

この状態でもう一度Runしてみると……ボールが右に動いて、画面の外側まで出て行きます。
ここまでできた皆さん、おめでとうございます。あなたはGMSでのプログラミングに成功しました!

・壁に当たると跳ね返る-衝突イベント-
ボールを動かすことができましたが、これだけだとゲームには程遠いですよね。
もうちょっとゲームっぽい動きにするために、ボールが壁に当たると動く向きが変わるというプログラムを作ってみましょう。

実際にプログラムを作っていく前に、まずはボールがぶつかる壁のオブジェクトとスプライトを用意します。

オブジェクト、スプライトの作り方と設定の手順は第3回と同じなので省略です。
強いて言えばスプライトはキャンパスいっぱい塗りつぶしたほうが壁っぽくなります。

できた壁オブジェクトをボールの左右を挟むように配置してみましょう。ルームにオブジェクトを配置する方法は第4回と同じです。
これでルームの準備ができました。

次にボールオブジェクトのプログラムに戻ります。
さっきCreateイベントを作ったのと同じように、
Add Eventボタン→Collisionイベント→さっき作ったブロック を選択。

画像右のようにEventsの欄にイベントが追加されていれば成功です。
これで「ボールがブロックとぶつかったときのプログラム」を組めるようになりました。
このように、オブジェクトにイベント(きっかけ、~したとき)とプログラム(どうするか)を設定していくのがGMSのプログラミングの基本となります。

それでは、動く向きを変える処理を作ってみましょう。
ブロック一覧のMovementカテゴリ(さっきと同じです)から、「Set Direction Variable」ブロックをドラッグ&ドロップ。
Direction欄に180を入力し、右のRelativeのチェックボックスにチェックを入れます。

実はこれだけで「壁オブジェクト(のインスタンス)にぶつかったら、向きを180度変える」というプログラムが完成してしまいました。
早速Runしてみましょう。ボールが二つのブロックの間を往復していれば成功です!

実はこれだけで「壁オブジェクトにぶつかったら、向きを180度変える」というプログラムが完成してしまいました。
早速Runしてみましょう。ボールが二つのブロックの間を往復していれば成功です!

・まとめ
今回はプログラミングの基礎編として、
オブジェクトのイベントを設定する→ブロックから必要な処理を選ぶ→ブロックを並べて数値を設定する
という一連の流れを説明しました。
ブロックの種類が色々あって驚いたかもしれませんが、簡単なゲームを作るにはブロックの内ごく一部の使い方がわかれば問題ありません。
次回はキーボードで操作できるオブジェクトの作り方を説明します。お楽しみに!

・おまけ
今回使った処理をより深く理解したい人は、Set Speedの数値を変えてボールの動く速度を変えてみたり、
衝突イベントのDirectionの数値やブロックの配置を変えるとどうなるかを試してみると面白いと思います。

衝突イベントのDirectionを-90にして画像のような配置にすると…?

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

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

第7回webのひみつ(divなどの指定)

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

今回はしっかりとしたdivで指定した場合のcssでの指定方法を取り上げて行きたいと思います。
まず、初めにdivには、二つの属性があります。
それは、id属性とclass属性と呼ばれるものがあります。

id属性とは、一度しか指定できないものであり、これを指定している場合は同じ属性のものを何度も書くことができませんので一度しか使えないものとなっています。
しかし、class属性の場合はその逆で、何度でも指定できるものとなっています。
このことから、もし1度だけしか使わず特定のものを指定したい場合はid属性、使いまわしで使用していきたい場合はclass属性を使用していくことが大事だと思っています。

次にcssで指定する場合ですが、divでの指定は、idの場合だと、
#idname{}
上記のような方法で記述をしていきます。
次に、classの場合だと、
.classname{}
上記のような方法で記述をしていきます。
このようにid属性やclass属性によって違いがあります。
これを間違えないように書いていくことが大事なのでしっかりと覚えてください。
次にulやbodyの指定について書いていきたいと思います。
こちらは、cssでは
ul{}

body{}
といったように特に指定することがなくそのまま書き込むことができます。
しかしこれを入力する際、もしulなどが複数あった場合に上記のような記述をすると全てに適用されてしまいます。そのため、これを避けるためには、classやidの指定が大事になってきます。
ひとつ例を挙げると以下の通りになります。


  • sample1
  • sample2


上記のような場合にclassを指定してあげることで指定する内容を分けることができますので、分けてていきたい場合にはこれを使っていくといいかも知れません。

こちらの指定方法に関しては、ul.1{}のような指定方法となります。
つまり、先ほど指定したclassやulの指定を組み合わせることで良いだけなのです。
またわからない点などが出来ましたら読んでみてください。

今回はこの辺で終わりたいと思います。
次回は良いレイアウトがありましたので、オラクル社のHPを参考にどのようなものがあるかを見ていきたいなと思います。
閲覧していただきありがとうございました。

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

ビットコインマイニングについて

ビットコインマイニング。

皆さん、こんいちは。 インターン生のエフゲーニーです。 読者の皆様におかれましては益々ご健勝のことと存じます。 凄く難しいテーマですけど、今日はビットコインマイニングについて話したいと思います。 まず、加増通貨のマイニングはどいうことかを知っていますか?仮想通貨マイニングとはブロックチェーンの新たなブロックを作成し、ブロック作成報酬や取引手数料を得ることです。 現在、2018年にはビットコインのブロック作成報酬は12.5 BTCであって、およそ900万円になっています。 大金額ですね。 じゃ、この報酬を得ることが出来るでしょうか?
さて、ブロックを作成するのは簡単ではありません。新しいブロックは一定の要件を満たさなければならないからです。 どいう要件というと、ブロックサイズの制限、ブロック構造の正しさ等の要件がありますが、最も満たしずらいなのはブロックのハッシュが 「Difficulty Target」という値より小さくなければならないという要件です。 「Difficulty Target」はブロック発見間隔が10分になるように2016ブロックごとに変更されています。 
ここでブロックのハッシュについて話したいとおもいます。
ビットコインのブロックのハッシュ数式はこちら: hash = SHA( SHA( blockHeader ) ),
ここでは:
hash – ブロックハッシュ値
SHA – SHA256というSHA-2シリーズの暗号化ハッシュ関数の1つです。
blockHeader – nonce, Merkle Tree, Difficultyなどのヘッダ情報を含むヘッダー です。
ブロックを作成したい人はnonceと Merkle Treeという値を変えられるですが、あるブロックのハッシュを計算しないとそのハッシュは「Difficulty Target」より小さいかどうか分からないですね。
nonceまたはMerkle Treeを変更して、 ブロックハッシュ値を計算して、「Difficulty Target」より小さいハッシュ値が出るまで繰り返す過程はマイニングです。
1つのブロックが適切な確率は何でしょうか? 現在、2018年のビットコインのハッシュレートを見ればおよそ3*1022ハッシュの間に適当なハッシュが一つです。 普通のパソコンでもマイニングできないほどの確率ですね。インタネットではbitcoin mining calculatorというツールを使えば、ある機械でマイニングすると利益が出るかどうか計算できます。
仮想通貨のマイイニングは非常に広いテーマですが、今回は以上になります。 
ご読み頂きありがとうございました。
興味を持たれた方はお気軽にお問い合わせください。

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

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第4回テーマは
「ルームとオブジェクト・スプライトを理解しよう(後編)」です。
前回やった事の続きになるので、前回作ったプロジェクトを開いてから読みはじめてください。

・オブジェクトにスプライトを設定する
さて、前回作ったスプライトをオブジェクトに設定してみましょう。
リソースツリーから作ったオブジェクトを選択。

Spriteの項目の「No sprite」をクリックすると設定できるスプライトの一覧が出るので、
さっき作った白マルのスプライトをクリック。

こんな感じの表示になればOKです。
ここで、先ほど?マークが出ていたルーム画面に戻ってみましょう。

こんな風に、前に?マークがあったところに白い丸が置いてあれば成功です!
このように、「スプライト(見た目)をオブジェクト(物体)に設定して」「作ったオブジェクトをルーム(画面)に置く」ことで、
実際のゲーム画面に映るキャラやモノを配置することができます。
こうしてルームに実際に配置されたモノをインスタンスと呼びます。Javaのようなオブジェクト指向の言語を知っていればなじみ深い用語ですが、
よくわからない人は
「たい焼きの生地や中身がオブジェクト、たい焼きの形を決める鉄板がスプライト、実際に焼きあがったたい焼きがインスタンス」
くらいに覚えておいてください。(余計わかりにくいかも…)

・スプライトの編集
オブジェクトにスプライトを設定して、インスタンスが目に見えるようになりました。でも、正直この見た目だと画面に対して小さすぎますよね。
そこで、一度作ったスプライトを編集して、大きさを変えたり別の見た目にする方法を紹介します。
今作ったスプライトを選択してスプライト編集画面へ。

Size欄の矢印が4つののマークをクリックすると、スプライトのキャンパスサイズを変えるための画面が出てきます。
左上が現在のサイズ、右上が変更後のサイズ。
左下が拡大縮小(描かれた絵のサイズも変わります)、右下がキャンパスサイズのみの変更です。
今回は左下の拡大縮小で、64×64のキャンパスを128×128にしてみます。

左下の幅(width)と高さ(height)を入力する欄にそれぞれ128と入力して、右上の数字が変わっていればOK。
Applyをクリックすると変更が適用されます。
ルームを見てみると、白丸のオブジェクトがさっきより大きくなっているのがわかると思います。
今度は大きさではなく、スプライトを別の図形に描き直すとどうなるかやってみましょう。
またスプライトの編集画面を開いて、右上のキャンパスをクリックして描画画面に移りましょう。

さっきの白丸を別のものに描き変えてみましょう。
(例では四角形ツールで青色の四角形を描いてみました)
描けたらもう一度ルームを確認してみましょう。ルームに新しく描いたものと同じものが見えていればOKです。

このように、スプライトを編集すればそのスプライトが設定されているオブジェクトや、そこから作ったインスタンスの見た目も変わるんですね。
例えば今回作ったオブジェクトをルームに何個もドラッグすれば同じ見た目のインスタンスが沢山作れますし、
その状態で設定されているスプライトを編集したり別のスプライトを設定すると同じオブジェクトから作ったインスタンスの見た目が一気に変わります。

・まとめ
2回にわたって、GMSでゲームを作る上での基本となるルーム・オブジェクト・スプライト、そしてインスタンスの説明をしました。
慣れない用語が多くて大変かもしれませんが、今後の説明のためにどうしても欠かせない部分です。
この記事を見ながら練習して、感覚をつかんでくださいね。

次回からはいよいよプログラミングです。お楽しみに!

・おまけ-ルームの背景にスプライトを設定する
ここから先は別に今覚える必要はありませんが、覚えるとちょっとできることが増えるおまけコーナーです。
本編よりも説明がざっくりになるので、慣れてない人は無理に理解しようとしなくても大丈夫です。
今後もこういうおまけを思いついたときに追加するかもしれません。

実はスプライトはオブジェクトだけではなくルームの背景に設定して見た目を変えることができます。
背景などルームに関係する設定は画面左側のRoom Editorにまとめられています。

上部のリストで下部の表示内容が変わり、
Instanceを選ぶと現在のルームに置かれたインスタンスの一覧を、
Backgroundを選ぶとルームの背景の設定をそれぞれ表示します。

今回は背景設定なのでBackgroundを選び、
オブジェクトと同じようにスプライトを設定。
すぐ下のチェックボックスのうち上2つにチェックを入れるとスプライトをタイル状に敷き詰め、
Stretchにチェックを入れるとスプライトの絵を引き延ばして背景にします。

(背景用に作ったスプライトと配置の例)

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

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