韓国あれこれ

スイカゲーム (수박게임) の作り方 【画像付き】 推しバージョンを作りましょう!

突然ですが、最近K-POPやジャニーズ界隈で話題の「合成大西瓜(수박게임)」をご存知ですか?

日本語では「スイカゲーム」といいます。

今回はプログラミング未経験の私でもできた「スイカゲーム(合成大西瓜・수박게임)」の作り方を、画像付きで詳細にご紹介します。

作ってみたいのに作り方が分からない…

作り方はわかったけど、中国語・韓国語ばかりで挫折しちゃった…

日本語での解説が知りたい!!

こちらの記事は、そんな皆さまにオススメです💖

今回、windows10を使用しています。

PC上のファイルを触ったり、海外サイトのファイルをダウンロードしたりという作業があります。この作業での不具合・エラーなど…すべて自己判断・自己責任でお願いします🙇‍♀️

初心者ですので、もっと効率的な方法もあったかもしれません。こっちの方が良いよ!と教えてくださる方ぜひご連絡ください☺️

Contents
  1. スイカゲームってそもそもどんなゲーム?
  2. 【スイカゲームを作る前に…】手順
  3. 【スイカゲームを作る前に…】事前準備!
    1. スイカゲーム「果物部分」の画像の準備
    2. その他の画像の準備(こだわりたい!という方だけでOK◎)
    3. 効果音(これもこだわる方だけでOK!)
    4. GitHubの会員登録&Vercelへのログイン
  4. 【スイカゲームの作り方①】使用する画像をまとめる(ツールにアップロードする)
    1. 「合成大西瓜改图工具 1.0」のページを開く
    2. 画像をアップロードする
  5. 【スイカゲームの作り方②】設計図となるファイルをダウンロード!
    1. ファイル(ソースコード)をダウンロードする
    2. 画像データを入れ込む
    3. 効果音を入れ込む(ある人だけ!)
    4. 「daxigua-master」の保存場所について
  6. 【スイカゲームの作り方③】node.js をダウンロード
    1. 「node.js」ダウンロードページを開く
    2. 「推奨版」をダウンロードする
    3. PCにインストールする
  7. 【スイカゲームの作り方④】PC上でコマンド入力
    1. node.jsがちゃんとインストールされたかの確認
    2. スイカゲームを作成する
  8. 【スイカゲームの作り方⑤】スイカゲームを公開するために、PCでコマンド入力
    1. コマンド入力:「npm i -g vercel」と入力する
    2. コマンド入力:「vercel -v」と入力する
    3. コマンド入力:「cd ◎◎」と入力する
    4. コマンド入力:「vercel」と入力する
    5. 自動で表示される質問に答えていく
  9. 【スイカゲームの作り方⑥】完成!!!!
    1. Vercelのダッシュボード画面を確認する
  10. 【スイカゲームの作り方】まとめ
スポンサーリンク

スイカゲームってそもそもどんなゲーム?

スイカゲームとは、その名の通り大きなスイカを作るゲームです。

ランダムに落ちてくる果物を使い、同じ果物同士をぶつけてどんどん大きくしていきます(最終的に大きなスイカが出来上がります)。

けっこう単純なんですけど、これがめっちゃハマります(笑)

その「果物」をそれぞれの「推し」にしてプレイするのが、近頃いろんなグループのペンの間で流行っています👼❤️

しかし、果物の画像を変更するには「スマホで設定を変更して終わり!」というわけではなく……

PCを使って作業をしなくてはいけません……

リス

ここで挫折する人が多いみたい・・・

そんな中、Hanaは韓国語・中国語の解説サイトを調べまくりました。

「我が推しであるニコラスを、大きなスイカのごとく育て上げたい」

そんな親心から、先日『スイカゲーム(合成大西瓜・수박게임)』ニコラス君verを作りあげました🌟笑

Hana

というか、お正月以降ぜんぜんHYBEJP Boysの供給がなく😿自己供給です(笑)

Twitterで紹介しています🍉

@nichonicho-milk

ちなみに私はまったくプログラミングを勉強したことのない、超々初心者です!

こんな初心者でも、やり方さえわかれば作ることができますので安心してください♪

【スイカゲームを作る前に…】手順

Hana

スイカゲームの作り方について、流れをザッと説明します!

全体としては、

  1. 基本の「スイカゲーム」のデータに、使用したい画像や音源を上書きする
  2. いろんな人が遊べるようにインターネット上にゲームを公開する

というイメージです。

下記のような流れで作業を進めていきます。

事前準備

  •  画像の準備(さらにこだわる!方は効果音も準備)
  •  「Github」の会員登録
  •  「Github」のIDで「Vercel」にログイン

の画像をまとめる(ツールにアップロードする)

ゲームの設計図となるファイルをダウンロード

「node.js」をダウンロード

パソコン上でコマンド入力

ライオンくん

一緒に頑張ろうね〜🦁❤️

【スイカゲームを作る前に…】事前準備!

スイカゲーム作りをスムーズに進めるためにも、先に準備をととのえましょう!

スイカゲーム「果物部分」の画像の準備

果物部分には、11個のサイズが異なる丸い画像が必要なので、準備していきます。

ここではPCでの作り方を紹介します。
スマホでは「PicsArt」などのアプリを使って加工もできますよ~(→加工しおわったらPCに保存してくださいね)

1.使いたい画像をPCに保存する

使いたい画像を探し、PCに保存します。ここではまだサイズを気にしなくて大丈夫です。

2.丸い画像を作る

使いたい画像を丸く切り取ります。

私はこちらのツール「画像丸抜きくん」を使用しました。

画像丸抜きくん

例えば、私のプロフィールアイコンを丸く切り抜いてみます。

トップページから「ファイルを選択」ボタンを選び、PCに保存した画像を選択(アップロード)する

「アップロードして丸く切り抜く」ボタンを選ぶ

自動で切り抜いてくれるので、OKであれば「クリックして丸抜き画像をダウンロード」をクリックし、PCに保存する

この作業を繰り返しおこない、丸く切り抜いた画像×11種類作成する

3.切り抜く場所が微妙だな…と思ったとき

もし切り抜く場所が微妙だな…と思ったときは、事前にトリミングしてからアップロードします。

たとえば、この猫の写真。

このままアップロードして丸く切り抜くと、こうなります。

ライオンくん

アイコンならいいんだけど…

スイカゲームにするなら猫の顔をど真ん中にしたいなぁ!

そんな場合は、PCのフォルダの画面で「トリミング」編集しちゃいます。

PC左下のスタートボタン or ツールバーから「エクスプローラー」を開く(キーボードの「windows」ボタン+「E」でもOK)

画像を保存した場所まで移動し、画像を開く

トリミングボタンをクリック(右上「編集と作成」ボタン>編集でもOK)

縦横比を「正方形」にし、左のウィンドウでいいかんじに調整する(顔を中央にしてあげると、果物ゲームでいい感じに表示される気がしますが、そこはお好みで)。

保存する

で保存した写真を「画像丸抜きくん」で丸く切り抜く

こんな感じになりました。

ライオンくん

さっきより顔がアップになっていい感じ💖

>>PCでトリミングする前

他にもいろいろと画像を丸く切り抜く方法はありますが、枠の外側が透過されている必要があります。

(丸く加工できた!と思ってもまわりが透過できてなくて四角い画像になっちゃった…なこともあるので注意)

ここまで終わったら、「画像丸抜きくん」のページは閉じてもらってOKです。

4.サイズ変更をする

スイカゲーム果物部分の11枚の丸い写真を作成したら、サイズを変更していきます!

サイズ一覧

(数字=画像サイズ【px】)

  • 52×52
  • 80×80
  • 108×108
  • 119×119
  • 153×152
  • 183×183
  • 193×193
  • 258×258
  • 308×308
  • 308×309
  • 408×408

またまたPCのエクスプローラー上でサイズをいじっていきます。

PC左下のスタートボタン or ツールバーから「エクスプローラー」を開く(キーボードの「windows」ボタン+「E」でもOK)

画像を保存した場所まで移動し、画像を開く

右クリック→「サイズ変更」を選択

「画像のサイズ変更」の、一番下「カスタムの寸法を定義します」をクリック

上のサイズ一覧をみながら、サイズ変更する(縦横比を維持するのチェックは、153×152・308×309の画像を作る時だけ外す)

「サイズを変更したコピーを保存」をクリックして、好きな場所に保存

これを、サイズを変えながら11枚分作ればスイカゲームの果物部分の準備はOK!

リス

画像の保存名には、サイズ(例えば「52×52」みたいに)を書いておくと後から分かりやすいよ

その他の画像の準備(こだわりたい!という方だけでOK◎)

このスイカゲームですが、果物部分だけでなく、果物以外の画像も変更できます!

引用元:GitHub – liyupi/daxigua

右上の画像
216×216 2枚

ここの画像は2枚とも同じでもOK。
もし2種類の画像を用意すると、その2枚の画像が連続して切り替わりながら表示されます。

背景
720×1280 1枚

1番下の茶色いブロック(果物が落ちる土台の部分)
720×127 1枚

やり直しボタン(▶マークのスイカ)
163×163 1枚

宝箱
121×113 1枚

トロフィー
68 ×60 1枚

サイズ一覧

(数字=画像サイズ【px】)

216×216ゲーム画面右上の画像1枚目
216×216ゲーム画面右上の画像2枚目
720×1280背景
720×1271番下の茶色いブロック
163×163やり直しボタン
121×113宝箱
68 ×60トロフィー

背景と1番下の茶色いブロック以外の画像は、背景を透過したほうが見栄え◎です!
いろいろ便利なアプリがあるので、スマホで作ると簡単ですよ♪

効果音(これもこだわる方だけでOK!)

果物が合わさるときなど、3種類の効果音も変更ができます✨

  • 1番大きな果物(スイカ)が出来上がるときの音
  • 果物が落ちる音
  • 同じ種類の果物が合体する音

すべてmp3の形式で用意してくださいね。

Hana

画像や効果音など素材の準備はここまでです♪

GitHubの会員登録&Vercelへのログイン

スイカゲームを公開するために「Vercel」「GitHub」というページを使います。事前に準備を整えておきましょう。

ブラウザは「Google Chrome」を使用すると、簡単にWebページを日本語に訳しながらできるのでラクでした🎀

1.「Vercel」を開く

まず、新しいウィンドウでVercelを開きます。

2.「Sign Up」します

右上「Sign Up」をクリックします。

3.「Continue with GitHub」をクリックする

「Continue with GitHub」をクリックします。

4.新規アカウントを作る

「Create an account」をクリックします。

5.ユーザー情報を登録する

以下の欄を入力し、アカウントを作成します。

  • ユーザーネーム
    アルファベット・「‐」が使用可
    最初の文字と最後の文字に「-」は使えない
  • メールアドレス
  • パスワード
  • チェックボックス
    チェックは外したままでOK
  • 質問欄
    スパム防止のための設問なので、必ず答える
    (この画像の中で○○な画像はどれですか?みたいな簡単なもの)

(続き)

6.アカウントの作成をクリックする

すべて埋めたら「Create account」をクリックします。

7.メールを確認する

登録したメールアドレスにメールが届きます。

メール内の「Verify email address」をクリックします。

8.「Github」にログインし、メール認証をする

トップページが開くので、ユーザーネーム(メールアドレスでもOK)と、パスワードを入力し、ログインすれば完了!

登録したメールアドレス宛にもWelcomeメールが届きます。

9.「Vercel」にログインする

続いて、Vercelへログイン(GithubのIDを使用)します。

Vercelのトップページ(https://vercel.com/)に戻り、手順2・3と同様に「Sing Up」「Continue with GitHub」をクリックします。

10.「Vercel」を承認する

下のようなページが表示されるので、表示されるユーザーネームが合っているか確認し、右下「Authorize Vercel」をクリックします。

ログイン完了です!

11.「ダッシュボード」ページを表示される

切り替わったページの左上の「vercel」ロゴをクリックし、「ダッシュボード」ページに移動しておきます。

このページを表示させたままで作業していきます(ウィンドウを閉じない!)

Hana

お疲れさまでした!!さっそく作っていきますよ~💕

【スイカゲームの作り方①】使用する画像をまとめる(ツールにアップロードする)

事前準備で用意した画像を専用のツールにアップロードしていきます!

「合成大西瓜改图工具 1.0」のページを開く

新しいウィンドウで「合成大西瓜改图工具 1.0」のページを開きます。

合成大西瓜改图工具 1.0

画像をアップロードする

各欄の上側(タイトル)にサイズが表記されているので、それを目印にして画像をすべてアップロードしていきます。

用意していない画像(変更の必要がない画像)の欄は、何も触らずそのままでOKです

1.サイズを確認する

タイトル末尾に表記されているサイズを確認します。

2.それぞれ画像を追加する

枠内の「+」をクリックし、画像を選択します。

果物部分の画像 は、11枚すべてアップロードします。

また、必要があれば、背景やその他の画像もアップロードします(それぞれアップロードする欄については、下の画像のとおり)。

3.データをダウンロードする

すべてアップロードし終えたら、一番下の青いボタンをクリックします。

そうすると、ダウンロードが始まり、PC内に「raw-assets.zip」がダウンロードされます。

zipファイルなので、解凍しておいてください(「raw-assets.zip」を右クリック→「すべて展開」

「raw-assets」というフォルダ名や、その中に入っているフォルダ名は変更しないでください!ダウンロードしたままの状態をキープです◎

ダウンロードできたら、このページは閉じてOKです。

【スイカゲームの作り方②】設計図となるファイルをダウンロード!

ファイル(ソースコード)をダウンロードする

1.ダウンロードページを開く

新しいウィンドウで、下記のページを開きます。

2.ソースコードをダウンロードする

スイカゲームの設計図となるファイル(ソースコード)をダウンロードします。

トップページの緑色のボタン「↓Code」ボタンをクリック

表示されるメニューの最下部「Download ZIP」をクリック

そうすると、ダウンロードが始まり、PC内に「daxigua-master.zip」がダウンロードされます。

zipファイルなので、解凍しておいてください(「daxigua-master.zip」を右クリック→「すべて展開」

こちらも「daxigua-master」というフォルダ名や、その中に入っているフォルダ名は変更しないでください!ダウンロードしたままの状態をキープです◎

3.2番目の「daxigua-master」フォルダを取り出す

解凍したら、フォルダが以下のような構造になっているか確認します。

「daxigua-master」

>>「daxigua-master」

>>「assets」「res」「src」…などいくつかのフォルダ

>>~~

2段階目の「daxigua-master」(赤字のもの)を右クリック→切り取って、好きな場所(オススメはデフォルトの「ダウンロード」フォルダ)に移動させます。

「daxigua-master」

>>「assets」「res」「src」…などいくつかのフォルダ

>>~~

上のような構造になればOK!

ライオンくん

1番大きな「daxigua-master」から、2番目に大きい「daxigua-master」フォルダを取り出すイメージだね💖

終わったら、このダウンロードしたインターネットのウィンドウは閉じてOKです。

画像データを入れ込む

最初にまとめた画像データファイル「raw-assets」を、先ほどダウンロードした「daxigua-master」ファイルに入れ込みます(上書きします)。

1.2番目の「raw-assets」フォルダを取り出し、切り取る

先ほどの「daxigua-master」での作業と同様に、1番大きな「raw-assets」から2番目に大きい「raw-assets」を取り出します。

解凍したばかりの「raw-assets」が以下のような構造になっているか確認します。

「raw-assets」

>>「raw-assets」

>>「00」「03」…などいくつかのフォルダ

2段階目の「raw-assets」(赤字のもの)を右クリック→切り取ります。

ライオンくん

1番頭のフォルダ「raw-assets」ではなく、それを開くと出てくる「raw-assets」を切り取り~!

2.「daxigua-master」>>「res」>>「raw-assets」の一部データと差し替える

先ほどコピーした「raw-assets」を、「daxigua-master」内の「res」に貼り付け、上書き保存をします。

「daxigua-master」を開く

「res」というフォルダーがあるので、右クリック→貼り付け

リス

「res」内にすでに「raw-assets」というフォルダがあるの。

さっきコピーした(推しの画像が入った)「raw-assets」の中身と、もともとあった「raw-assets」の一部分を入れ替えるイメージだよ🌟

貼り付けるときに、以下の画面が出てきたら、「ファイルを置き換える」をクリック◎

効果音を入れ込む(ある人だけ!)

事前準備で用意した効果音のmp3ファイルを、「daxigua-master」ファイルに入れ込みます(上書きします)。

「daxigua-master」>>「res」>>「raw-assets」と開き、この「raw-assets」内をチェック!

1番大きな果物(スイカ)が出来上がるときの音

「a7」フォルダ内のmp3ファイルと、準備した効果音を差し替えます。

同じ種類の果物が合体する音

「bb」フォルダ内のmp3ファイルと、準備した効果音を差し替えます。

果物が落ちる音

「d3」フォルダ内のmp3ファイルと、準備した効果音を差し替えます。

差し替えた効果音の名前は、それぞれ元の効果音と同じものにしましょう✨
(こちらも画像と同様、「上書きをする」イメージです)

  • a7→「a74390ae-6d68-48d1-ad36-f652a43b8694.mp3」
  • bb→「bb54cc4f-da05-430f-be09-a0dab6473562.mp3」
  • d3→「d314aef5-920d-44f4-aa26-423c3664acc6.mp3」

「daxigua-master」の保存場所について

「daxigua-master」フォルダは、こだわりがなければ「ダウンロード」フォルダ内のまま動かさない方が良いです🌷

ライオンくん

半分くらいまで来たよ!

【スイカゲームの作り方③】node.js をダウンロード

あとでPCの「コマンドプロンプト」というプログラミングに必要な画面をいじります。

その作業に必要なので「node.js」をダウンロードしておきます。

「node.js」ダウンロードページを開く

新しいウィンドウでnode.jsのダウンロードページを開く

node.js

「推奨版」をダウンロードする

「推奨版」の方をダウンロード

PCにインストールする

1.インストール画面を開く

ダウンロードしたファイルを開くとインストール画面が開く

「next」をクリック

2.チェックを入れ、「Next」をクリック

チェックボックスにチェックを入れ、「Next」をクリック

3.のこり全てを「Next」で進み、インストール完了

のこり全て「Next」で進む(途中でチェック欄が出てくるけど、空欄でOK)

最後に「Install」ボタンを押し、インストール完了

【スイカゲームの作り方④】PC上でコマンド入力

まず、「コマンドプロンプト」を立ち上げます。

立ち上げ方

キーボードの「Windowsキー」+「R」を同時に押す

出てきた入力欄に「cmd」と入力

OKボタンをクリック

※PCの「スタート」ボタン→Windowsシステムツール→「コマンドプロンプト」で起動させてもOKです!

既に3行ほど入力されている黒い画面の窓が出てくるので、その続きからコマンドを入力していきます!

ライオンくん

ここにいろいろ入力していくんだね!

node.jsがちゃんとインストールされたかの確認

先ほどダウンロードした「node.js」が無事にインストールできたか確認します。

ここから入力スタート!

コマンド入力:「npm -v」と入力する

「npm -v」と入力→エンターキー

「npm(半角スペース)-v」です。

バージョン番号(数字)が出てきたらOK!

スイカゲームを作成する

1.コマンド入力:「npm i -g serve」と入力する

続けて、「npm i -g serve」と入力→エンターキー

「npm(半角スペース)i(半角スペース)-g(半角スペース)serve」です。

エラーメッセージではなく、英数字がツラツラと表示されればOK

2.コマンド入力:「serve」と入力する

「serve」と入力→エンターキー

3.「serving!」と表示されたらURLをコピーする

「Serving!」の枠が表示されたらOK◎

上側の「Local」に表示されたURL(アドレス)を「Ctrl」+「C」でコピー

4.コピーしたURLを確認する

3の「コマンドプロンプト」(黒い画面)は開いたままにして、インターネット画面を開く

新しいウィンドウで、3でコピーしたURLにアクセスする

PC内のフォルダを開く画面(エクスプローラー)のような画面が表示されるので、「daxigua-master」を探す

例えば、ダウンロードフォルダ内に保存したなら「Downloads/」をダブルクリックしたら見つかるはずです。

5-4『「daxigua-master」の保存場所について』で、できれば「ダウンロード」に保存してね!って言ったのは、ここの作業で探し出すのが大変だからです💦

「daxigua-master」ファイルを開き、問題なく画像などが変更されていればOK!

Hana

ゲームは完成したので、公開するための設定をしましょう♡

先ほどゲームを確認したインターネットの画面と、「コマンドプロンプト」(黒い画面)は消してOKです。

ライオンくん

あともう少しだよ🙆‍♀️

【スイカゲームの作り方⑤】スイカゲームを公開するために、PCでコマンド入力

もう一度、新しい「コマンドプロンプト」を立ち上げます。

立ち上げ方

キーボードの「Windowsキー」+「R」を同時に押す

出てきた入力欄に「cmd」と入力

OKボタンをクリック

※PCの「スタート」ボタン→Windowsシステムツール→「コマンドプロンプト」で起動させてもOKです!

コマンド入力:「npm i -g vercel」と入力する

「npm i -g vercel」と入力→エンターキー

「npm(半角スペース)i(半角スペース)-g(半角スペース)vercel」です。

エラーメッセージではなく、英数字がツラツラと表示されればOK

コマンド入力:「vercel -v」と入力する

「vercel -v」と入力→エンターキー

「vercel(半角スペース)-v」です。

バージョン番号(数字)が表示されればOK

コマンド入力:「cd ◎◎」と入力する

新しい行に移ったら、次は「daxigua-master」の場所を指定します。

1.コマンド入力:「cd downloads」と入力する

「ダウンロード」フォルダに保存している人は、「cd downloads」と入力→エンターキー

「cd(半角スペース)downloads」です。

新しい行に自動で移動します。

2.コマンド入力:「cd daxigua-master」と入力する

cd daxigua-masterと入力→エンターキー

「cd(半角スペース)daxigua-master」です。

下記のような画面になればOK

Hana

ここまでのコマンドは、「ダウンロード」フォルダ内に「daxigua-master」フォルダがあるよって意味です🌟

【ちょっと解説】「downloads」以外に保存している人→cd ◎◎の「◎◎」の部分が変わってきます

この「cd ◎◎」というコマンドで、「daxigua-master」の保存場所を指定しています。

「ドキュメント」内に保存した場合

「cd documents」と入力しエンター
→「cd daxigua-master」

「ダウンロード」内に「すいか」という名前のフォルダを作り、その中に保存した場合

「cd downloads」と入力しエンター
→「cd すいか」と入力しエンター
→「cd daxigua-master」

ゲームの公開場所である「vercel」のサイトと、自作したゲームのデータ「daxigua-master」を「コマンドプロンプト」でコマンド入力することで、結びつけるイメージです。

コマンド入力:「vercel」と入力する

cdで場所を移動させることができたら、続いてvercelと入力→エンターキー

【コチラの作業は「Please log in」のメッセージが出た人のみ!】

※事前準備でログイン済みであれば、以下の作業は必要ないはずなので、飛ばしてOK※

「vercel」と入力し、エンターキーを押した後、こんなメッセージが出ることがあります。

No existing credentials found. Please log in:

Enter your email:

このメッセージが出てきたら、Vercelにログインする必要があります。

「Enter your email:」に続けて、事前準備で「GitHub」の登録をした際に使用したメールアドレスを入力→エンターキー

すぐにメールが届くはずなので、「コマンドプロンプト」(黒い画面)は閉じずにそのままメールをチェック。

メールを開き、黒い「VERIFY」ボタンをクリック

「Email Address Confirmed」と表示されたらOK(インターネットのウィンドウが開きます)

メール認証が終わったら、「コマンドプロンプト」(黒い画面)に戻り、もう1度「vercel」と入力→エンターキー

自動で表示される質問に答えていく

1.?Set up and deploy “~¥Downloads¥daxigua-master”? [Y/n]

「vercel」とコマンドを入力した後、以下のようなメッセージ(質問)が表示されます。

?Set up and deploy “~¥Downloads¥daxigua-master(←「cd ◎◎」で指定した場所)”? [Y/n]

何も入力せずエンターキーを押すと、自動で「y」と入力されます◎

2.? Which scope do you want to deploy to?

? Which scope do you want to deploy to?

● ユーザーネーム

ユーザーネームを確認し、OKなら何も入力せずエンターキー

自動でユーザーネームが入力されます◎

3.? Link to existing project?

? Link to existing project?

何も入力せずエンターキーを押すと、自動で「n」と入力されます◎

4.? What’s your project’s name? (◆◆)

? What’s your project’s name? (◆◆)

ここで、「プロジェクトネーム」を自由に入力します。

プロジェクトネームは、ゲームのURLに使用される英数字です。

◆◆にはデフォルトで文字が入っていますが、無視して好きな文字を入力します。

(入力すると『(◆◆)』の部分が自動で消え、新しいプロジェクトネームが上書きされます)

例:「nicholas」と入力

ゲームのURLが「https:// nicholas .vercel.app」となります。

アルファベット・数字・「-(ハイフン)」を組み合わせて、好きな文字を入力→エンターキーを押せばOK

残りの質問→すべてエンターですすめばOK

2つほど入力部分が出てきますが、残りは全て何も入力せずにエンターですすみます。

自動でいろいろ処理してくれます◎

【スイカゲームの作り方⑥】完成!!!!

質問全てに答えたら、「コマンドプロンプト」(黒い画面)に、バーッと英数字が表示されます。

最後まで表示されたら、「✔ Production」の行をチェック!

このURLが、ゲームのアドレスになります。

このアドレスにスマホからアクセスして、スイカゲームを楽しみましょう🌟

Vercelのダッシュボード画面を確認する

ちなみに、事前準備の最後の作業で「Vercel」のダッシュボード画面を開いたままにしておいたかと思います。

このページを確認すると、ゲームが上手く連携されていれば画面左側にプロジェクトネームとゲームURLなど詳細が表示されます。

リス

フィニッシュ!お疲れ様でした🥺💖

スポンサーリンク

【スイカゲームの作り方】まとめ

以上が「スイカゲーム(合成大西瓜・수박게임)」の作り方でした😊

お疲れ様でした~(*¨*)♡

難しそう…と思った方も、このやり方をご覧いただきながら作れば(たぶん)できます!

▼noteにてほんの少し補足があります(見なくても支障はないですます◎)

最近増えてきたおうち時間や、のんびりお風呂時間、ちょっと憂鬱な通勤通学時間など……

推しのスイカゲームで癒されませんか??

少しでもお役に立てれば嬉しいです🌸

それでは、あんにょん!

🌷中国語解説サイト「魔改和上线你的合成大西瓜,最全教程!

🌷韓国語解説サイト「둥닷펌)수박 게임 만드는 방법

スポンサーリンク