と悩んでいませんか？

この記事ではGoogle AI Studioを使って無料でゲームをつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

Google AI Studio：無料でつかえるGoogleが運営する開発用のAI生成サイト

今回ゲーム生成でつかうサイトです

>> 「Google AI Studio」のサイト

このサイトは開発者向けのAIサイトです

GoogleのGeminiをベースにさらに細かくプログラムや画像、動画をつくることができます

メニューは英語ですが、命令は日本語OKなので、ブラウザの翻訳をつかえば問題なく使うことができます

Google Gemini：無料でつかえる万能AIツール

無料でつかえるGoogle公式のAIツールです

「Gemini」のサイト

Googleトップページからもつかえるので、多くの方がつかっているAIツールです

とても使い方がわかりやすく中央のボックスに命令を入れるだけで、AIが命令を理解して動いてくれます

Google AI Studioの爆速ゲーム制作の方法

Google AI Studioでつくったゲームの紹介

今回つくるシューティングゲームです

プログラムをAIにつくってもらうバイブコーディングという方法でつくります

今回つくるシューティングゲームです

プログラム、イラスト、ゲームにつかう物をすべてAIでつくることができます

もちろんプログラムが未経験の方でもつくることができます

AIでゲームのイメージイラストをつくる

Geminiに生成するイメージを命令する

はじめに、Geminiでゲームのイメージ画像を生成します

Geminiが生成したイラストをダウンロードする

Geminiがつくったゲームイメージの例です

このイラストをもとにゲームのプログラムを生成します

画像の生成は1～2分でおわります

生成がおわったら、バイブコーディングでつかうためにダウンロードします

AIで横スクロールシューティングのプロトタイプをつくる

「Google AI Studio」のサイトでプログラムをつくります

「Google AI Studio」は本格的にAIのプログラムの生成をおこなうことができます

生成したプログラムをダウンロードする

プログラムの生成は１～3分でおわります

生成したゲームをためしてみよう

キーボードで動く横スクロールシューティングをつくれました

しかし、ゲーム画像がブロックなので次は画像をつくります

まだブロックの絵が動くだけですが、しっかりシューティングゲームとして動くプログラムができました

主役キャラクターの画像をつくる

ゲーム画像がブロックなので、ゲーム画像をつくります

Geminiでキャラクター用の画像を生成します

キャラクター画像を生成できました

しかし、背景が白色で透明ではないようです

背景切り抜きができる「My Edit」のサイトに移動します

>> 「My Edit」のサイト

つづいて、画像の大きさを小さくします

Geminiで敵キャラクターを生成する

主役キャラにつづいて敵キャラの画像もつくります

少しかわいい敵キャラをつくることができました

つづけて何体か敵キャラをつくります

ちょっとかわいいキャラがあらわれました

つくったキャラの背景を透明にして、画像のムダな部分をカットします

ChatGPTで背景の画像をつくる

背景はくり返しのループ画像がとくいなChatGPTでつくります

>> 「ChatGPT」のサイト

つくった全ての画像をゲームに登場させる

はじめに、主役キャラをゲームに登場させます

主役キャラの画像をアップロードできました

この画像をゲームに登場させるようにAIに伝えてプログラム生成します

主役のキャラ画像が登場しました

次は敵キャラをゲームに登場させます

登場させる敵キャラの画像をアップロードします

命令も組み合わせて、AIでプログラムを生成します

生成したプログラムを実行すると敵キャラがあらわれました

次は背景を登場させます

作成した背景をアップロードします

画像、命令と組み合わせてプログラムを生成します

敵キャラが小さくなり、背景画像がゲームに登場しました

しかし、まだプレイヤーの玉がゲームっぽくありません

プレイヤーの玉、敵キャラの大きさをもっとゲームに合うように変えます

全体的にメルヘンな感じで、ゲームが完成しました

まとめ & ブログで紹介したゲームの動画

ゲームがうごいている雰囲気、くわしいつくり方は下の動画から確認できます

AIのプログラミング（バイブコーディング）は他のページでも紹介しています

合わせてごらんいただくと、さらに多くのゲーム作成にいかせます

と悩んでいませんか？

このページでは、だれでも、できる方法で、お絵かきツールのつかい方を紹介しています

今回は無料ソフト「アイビスペイントX」のつかい方、合成画像をつくるテクニックを紹介します

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、絵と映像のつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・「アイビスペイントX」をはじめて聞いた方

「アイビスペイントX」スマートフォン用の無料のお絵かきソフトです

「アイビスペイントX」は「Android」、「iPhone」のスマートフォンで絵を描くためのソフトです

「アイビスペイントX」で絵を描いている映像です

インストールは「GooglePlay」、iPhoneの方は「App store」にアクセスしてください

・アイビスペイントXで合成画像を作って使い方を覚えよう

・紹介するお絵かきテクニック

今回、紹介するお絵かきテクニックの絵です

・合成画像をつくるために必要なファイルをダウンロードしよう

合成画像につかう「電車の窓」の写真をダウンロードします

2枚目の合成画像につかう「海の魚」の写真をダウンロードします

背景を透明にできるアプリをダウンロードします

お絵描きソフトのアイビスペイントをダウンロードします

・合成する画像の背景を切り抜こう

はじめに、背景を透明化させます

ダウンロードした「電車の窓」の写真をタップしてください

開いた写真の大きさを変えます

窓の景色を切り抜きます

タップすると景色が消えます

魔法ツールをつかうと細かい部分を消せます

窓の中を透明にできたら保存します

・アイビスペイントで２枚の写真を合体させよう

はじめに写真のファイルを読み込みます

写真読み込みボタンをタップすると、ファイルを開く画面になります

保存した画像のファイルをタップしてください

2枚目の画像を開く用意をします

2枚目の写真をタップしてください

大きさは変えずに読みこみます

窓の中に使う魚の写真は、一番下に動かします

魚の写真を一番下に動かしました

・フィルターを使って画像の明るさや色を変えよう

フィルターを使い、画像の明るさ、色を変えます

明るさを変えるパネルがあらわれました

コントラストを動かすと、画像の色がハッキリします

・つくった画像を保存しよう

保存ボタンをタップするとイメージを保存できます

完成した画像です

下の画像はAIを使った画像です

フリー素材ですので、どうぞご使用ください

・まとめ

今回は、無料ソフト「アイビスペイントX」のつかい方と合成画像をつくるテクニックを紹介しました

Youtubeでは、さらにおもしろく絵のつくり方を紹介しています

また、他のページでもCG・映像のつくり方について紹介しています

>> 動画で紹介！絵と映像のつくり方

>> 絵と映像のつくり方のカテゴリーページ 絵と映像のつくり方

と悩んでいませんか？

このページでは、だれでも、すぐにできる方法で背景をつくる方法を紹介しています

ゲームエンジンの美しいグラフィックを使えば、すぐにカンタンに背景をつくることができます

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、絵と映像のつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・ ゲームエンジン とは何？

ゲームエンジンはとても多くのつかい方ができる

ゲームエンジンは、グラフィック、ゲームをつくれるソフトです

ゲームエンジンは美しいグラフィック、ゲームをつくることができるソフトです

特に、Unreal Engineは最も美しいグラフィックをつくることができます

Unreal Engineは、現在、世界中で、多くの使い方で使われています

Unreal Engineでつくられたゲームを紹介します

・Unreal Engineを使うためにはどうすればいいの？

・Unreal Engineをダウンロードしよう

Unreal Engineを使うためには、インストールする必要があります

Unreal Engineをつかうためには、インストールする必要があります

インストールプログラムは公式サイトからダウンロードすることができます

＜UnrealEngine公式サイト＞
https://www.unrealengine.com/ja/

公式サイトで、アカウントをつくります

アカウントをお持ちでない場合は、アカウントをつくってください

お持ちのアカウントから、つくることができます

アカウントを作りましたら、プログラムをダウンロードします

ダウンロードしたプログラムを起動すると、インストールがはじまります

インストールが終わりましたら、Unreal Engine本体をダウンロードします

続いて、Unreal Engineで背景をつくる方法を紹介します

・ゲームエンジンで背景をつくろう

・UnrealEngineを起動しよう

UnrealEngineを起動してください

インストールが終了したら、はじめにプロジェクトを作成しましょう

・ストアからアセットを追加する

ここまででアセットを追加する準備が整いました

次は、アセットという画面上にパーツを配置するセットをダウンロードします

今回使用するアセットは下のアセットになります

プロジェクトへ追加が終わりましたら、「ライブラリ」から作成したプロジェクトを選んでください

制作画面が表示されます

・きれいな風景を作ってみよう

・地面を作ろう

上の画像のような画面が表示されたら地面を作ってください

作成ボタンを選ぶとシェーダーのコンパイルが始まり、緑色の地面が作られ始めます

シェーダーのコンパイルが終了すると緑色の地面が表示されます

下の画面のように地面が作成されたら、「ランドスケーモード」から「選択モード」に戻します

・３Dオブジェクトを配置しよう

地面の次は３Dオブジェクトを配置します

選択モードに変更していない場合は画面上部の「モード」から「選択」を選んでください

表示された３Dオブジェクトはメインウィンドにドラッグ＆ドロップで置くことができます

・置いた３Dオブジェクトを変形させよう

オブジェクトの変形は、オブジェクトに表示される矢印をドラッグすると変形させることができます

・スクリーンショットを撮ろう

UnrealEngineはスクリーンショットの機能が元から備わっています

完成してスクリーンショットを取った画像です

・ビルドをしてエラーを消す

作業をしていると画面左上にエラー表示が出てくることがありますが

「ビルド」ボタンを押すとビルド（計算）をしてエラーが消えます

・PhotoShopを使って漫画に使える背景を作ろう

・PhotoShopを使った線画の抽出

スクリーンショットを撮った後はPhotoShopで線画を作ります

画像を読み込んだら元のレイヤーを３つコピーして名前をそれぞれ上から「ハイパス」、
「輪郭抽出」、「そのまま2階調」に変更してください

グレーになりますが、線は残っていますので、気にされないで大丈夫です

・レイヤーを重ねて完成度をたかめる

続いて薄い線画の抽出をします

・べた塗りの画像を作る

続いて、ベタ塗の画像を作ります

今回の画像では最後の2階調を「50」にしましたが、画像により調節して変化させてください

以上の作業で線画の抽出が完成しました、私の画像では下のような結果になりました！

・まとめ

今回はUnrealEngineとPhotoShopと２つのソフトを使い漫画の線画の作成をしました

Youtubeでは、さらにおもしろく絵のつくり方を紹介しています

また、他のページでもCG・映像のつくり方について紹介しています

>> 動画で紹介！絵と映像のつくり方

>> 絵と映像のつくり方のカテゴリーページ

ゲームエンジンとは、ゲームを作ることが得意なソフトです

しかし近ごろ、ゲームエンジンの機能はゲーム以外でもさまざまなことに使われ始めています

ゲームエンジンが得意とすることは、キレイな背景や自由に３Dオブジェクトを配置できる機能です

例えば、建築モデル、漫画の背景、映画を作ることなどで利用が進んでいます

特に漫画や映像は大掛かりなセットや時間のかかる作業をなくせることから注目されています

このため今後、ゲームエンジンの使い方がカンタンになるにつれて、

これだけイロイロなことができて無料ということもあり、使う人が増えると思います

そこで、今回は代表的なゲームエンジンであるUnityを使い写真・漫画・映像のワンシーンなど

ちょっとしたところに利用できそうな使い方を紹介します

１．Unityをインストールしていない場合はインストールしよう

始めに簡単にUnityのインストールの方法を紹介します

Unityは無料（ProやPlusでなければ）なので誰でも使うことができます

公式サイトのURLは下のアドレスになります

https://unity.com/ja

インストールが完了したら、Unity本体をインストールをしましょう

今回は2020.3.6を使用しています

インストールが完了したら、プロジェクトを作成しましょう

作成したプロジェクトを実行するとUnityが始まります！

２．SketchFabで３Dオブジェクトをダウンロードしよう

SketchFabは無料で３Dオブジェクトが配布されているサイトです（一部有料もある）

背景や環境の３Dモデルが多いので、知っておくだけで利用の幅が広がると思います

ダウンロードURLは下になります

https://sketchfab.com/feed

今回はその中でも下のモデルをダウンロードして利用します

Ancient Corinth – Peirene Fountain
（ダウンロードURL）https://skfb.ly/onPWx

３Dオブジェクトが決まりましたらダウンロードボタンを押してください

ダウンロードボタンを押すと下のポップアップが出現します

「OBJ」ファイルをダウンロードしてください

３．モデルを読み込もう

ダウンロードしたモデルはそのままでは読み込めないので

全て解凍してください

OBJファイルが３Dオブジェクトの本体になります

以下の画像の通り、解凍したファイル（obj、mtl、pngなど）を３DオブジェクトのOBJと一緒に

ASSETSウィンドにドラッグ＆ドロップします

紹介した３Dモデルの場合
「jaaninoja-bridge-in-turku-kurala-finland」フォルダの
「source」フォルダの中の
「Jaaninoja_Bridge_decimated_SF.zip」ファイルを解凍して出てきたファイル全てを入れます

（私のオススメの解凍ソフトです、探している方はぜひ→https://peazip.github.io/（peazip)）

オブジェクトの準備が終わるとウィンド下部に下のように表示されると思います

次は赤ワクのオブジェクトをメイン画面にドラッグ＆ドロップしてください

オブジェクトが配置されたら、矢印をマウスでつかんで動かしてください

ベストな位置に来たら、キャプチャーをします

キャプチャーの方法は色々ありますが、私は「Game」タブからハードコピーをしました

キャプチャーは下のサイトのスクリプトでもできます

404 File Not Found

blog.yumineko.com

下のように画面キャプチャーができました！どうでしょうか

工夫次第でいろいろな背景に使えると思います

背景は別の空用のアセットを入れて少し見栄えをよくしました

下の画像はPhotoShopで画像を元に編集したものです

ゲームエンジンは日々進化しています

工夫次第で使える場面はこれからもさらに増えると思います！

この記事は以上です、ここまで読んでいただいてありがとうございました！

・・・と悩んでいませんか？

このページでは、誰でもカンタンに使えるSumopaintを紹介しています

ぜひ、オンライン画像編集にチャレンジしてください

イラスト５５

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、絵と映像のつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・SUMO PAINT －わかりやすい操作画面と万能な機能

SUMO PAINTのURLは下のリンクになります

https://paint.sumo.app/?lang=ja

トップページにある「Try Online」のボタンをクリックすると、登録せずに始めることができます

下の画面が起動したときに現れる画面です

それぞれパネルの説明をします

① 「TOOLS」パネル －色をぬったり、線を描くためのツールが揃っています

②「メニュー」パネル －ツールメニューにはない、保存や細かい調整をする時に操作するパネルです

➂「TOOL SETTINGS」パネル －選択したツールの設定ができます、選んだツールによって変化します

④「レイヤー」パネル －レイヤー（絵の階層）をコントロールできるパネルです

・カンタンなイラストを制作して操作を覚えよう

イラスト５５

SumoPaintでカンタンなイラストを作り、操作を覚えましょう
下の画像を制作します！

・ 図形を描く・向きを変える・位置を移動する

はじめに三角形を制作します

しかし、ツールの中には四角形しかありません

そこで画面左の赤ワクの多角形（五角形）を選択してください

するとメニューパネルが切り替わります、「Sides」を「５」から「３」に変更してください

「Sides」は角の数になります、「３」にすることで三角形を作ることができます

準備ができたので、画面中央でマウスをドラッグして右方向にスライドしてみましょう

三角形が描けました、しかしナナメにかたむいています

次は三角形の角度を直します、「メニュー」パネルから「Edit」→「Free Transform」を選んでください

選択範囲を選ぶ「＋」マークが出てきたら、三角形を下の図のように囲んでください

囲んだ後、赤ワクの「□」マークにマウスを合わせてください

「□」マークに合わせてマウスを右方向にドラッグしてください

約30度くらいかたむけると、三角形の向きが直ります

向きが修正できたことを確認した後は

画面左上の「Apply Transform」をクリックして修正を決定してください

続いて三角形の位置を画面の中央に移動します

画面左上の「選択範囲」ツールをクリックしてください

描いた三角形を「＋」マークに変わったマウスカーソルで囲んでください

これで選択範囲として三角形が選択できました、移動の準備ができたら

ツールパネル左上の「移動」ツールをクリックしてください

続いて三角形の中央でドラッグしてください

ドラッグした後、下画像のように画面中央に持ってきてください

これで図形の制作が終わりました

・テキストを書く・色を変える

続いて、テキストを入力します

画面左の「テキスト」ツールをクリックしてください

入力したい場所でクリックすると文字が入力できます

もし位置を修正する場合には文字を入力する前に「Text」をドラッグして位置を直てください

文字を入力するために「Text」をダブルクリックすると文字を入力することができます

文字を変更して位置がズレた場合は、赤ワクなどの何もない場所でクリックすると位置を修正できます

全て修正が終わった場合は画面上部の「Rasterize Text」をクリックしてください

続いてドッキリマークの文字を入力します

テキストツールを選んだまま、画面上部の「Color」をクリックしてください

様々な色が出てくるので、「白」色を選択してください

描いた図形の上でクリックすると白色でテキストが出てきます

「！」マークを入力してください

これでテキストの入力が完了しました、次はレイヤーの説明を行います

・レイヤーを作成する

続いてキャンパスの透明部分を白色で埋めます

画面右下のレイヤーパネルで「＋」マークをクリックしてください

下の画像のように、これでレイヤーが作成されました

しかし、新しいレイヤーが上にあるのでこれまでのレイヤーの下に移動します

画面右下の「↓」ボタンをクリックしてください

下図のようにレイヤーが移動しました

右赤ワクのように下のレイヤーをクリックして色が黒色に変化しているのを確認した後

左のツールパネルから「バケツ」ツールを選びます

左上の「Color」ボタンをクリックして白色を選び、キャンパス上でクリックすると

下の画像のように全て、塗りつぶされました

これで完成です、このように「SUMO PAINT」は基本的なイラストを描く機能が備わっています

ここまでで、SumoPaintソフトの使い方は終わりです
続いて、他の画像編集ソフトを紹介します

・他のオンライン画像編集ソフト

・Gravit Designer －ベクター画像を簡単＆わかりやすい操作で制作できるソフト

Gravit Designerはベクター画像（拡大・縮小しても劣化しない画像）をオンラインで制作できます

画像編集や写真加工はフリーでも便利なソフトが多くでましたが

まだベクター画像ソフトは有料ソフトにはかないません

しかし、昔よりも格段に使いやすくなり単純な作業は無料ソフトでも問題ないと思います

Gravit DesignerのURLは以下になります

https://www.designer.io/en/

トップページは下になります、赤ワクの「Get Started」をクリックしてください

次の項目からGravit Designerの機能を作る流れを通して紹介します

・ 画面サイズ・操作画面の説明

ここからは下のイラストの制作の流れから基本操作を説明します

下の画面の通り、キャンパスサイズの選択画面が出てくるので

「Webデスクトップ」の「小サイズ（1024×768）」を選択してください

画面サイズの選択が終わると以下の操作画面があらわれます

①「レイヤー」パネル －レイヤー（階層）をコントロールできます

②「ツール」パネル －図形や文字を入力するためのツールを選ぶパネルです

➂「メニュー」パネル －ファイル保存などツールパネル以外の操作を行います

④「インスペクタ」パネル －選んだツールの細かい動きを決めることができます

・図形を描く・色を変える・移動する

画面左上の「ツール」パネルから図形ツールを選んでください

選ぶ時には図形の「↓」矢印をクリックして三角形を選んでください

画面中央でドラッグしたまま、右方向にスライドさせると三角形を描くことができます

描いた三角形はナナメを向いているので、赤ワクの選択ツールで図形の真上の「〇」をドラッグして

左に約30度ほど傾け、図形を修正してください

また、位置も図形中央をドラッグすることにより修正できます

画面の中央に図形を持ってきてください

続いて、図形の色を変更します

赤ワクの「塗りつぶし」にある色のアイコンをクリックすると色を選ぶことができます

「黒色」を選んでください

ここまでが図形の制作です

続いて文字の入力を行います、画面左上の「テキスト」ツールを選び

文字を入力する場所でクリックしてください

文字が入力できるようになります

文字の大きさが小さい場合は、画面右側の「サイズ」を選んでください

文字のサイズを変更が変更できます

続いて三角形の中央に「！」マークを書きます

手順は同じですが、テキストの色を変更する必要があります

画面右の「カラー」から「白」を選び、三角形の中央で文字を入力してください

ここまでの作業で下の画像の通り、イラストができます

Gravit Designerの説明は以上です

また、ファイルの保存については「エキスポート」から「svg」を選択すると拡大縮小でも

問題ないファイルで保存できます

・SumoPaintとGravit Designerの注意点です

・まとめ

今回は無料のオンライン画像編集「Sumo Paint」の使い方を紹介しました

イラスト５５

Youtubeでは、さらにおもしろく絵のつくり方を紹介しています

また、他のページでもCG・映像のつくり方について紹介しています

>> 動画で紹介！絵と映像のつくり方

>> 絵と映像のつくり方のカテゴリーページ