Unityで背景画像をユーザーが自由に変える機能

Unity2Dを使って作った学習用ゲームにおいて、ゲーム内の背景画像をユーザーが自由に変えられるようにしたいのですが、
やり方がわからず困っています。

例えば、

「画像サイズはこれ、種類はこれで用意してください」としたうえで、ユーザーが用意した画像をサーバーにアップロード
→同じサーバに置かれているWebGLでビルドされたゲームをプレイ
→背景がアップロードされた画像になってゲームがスタートされる

というような感じのことをしたいです。

Unityは2017.2of3 personal、サーバーはfc2で今の所やってみてます。pcはmacbook使ってます。

サーバー関係やhtml初心者のため、調べてみても私の手では解決策を見つけられませんでした・・・

どなたかお力をお貸しください、よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

WebGLであれば画像のアップロードはUnityからやるよりもブラウザからやった方が簡単だと思うのでブラウザからのアップロードにしてみました。

また、ファイルをアップロードしたユーザーとゲームをプレイしているユーザーをどう関連付けるかが悩んだのですが、
今回はIPアドレスで判断することにしました。

HTMLとJavaScript(JQuery)で画像をアップロード

index.html

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>
	$(function() {
		// ファイルが選択されたらアップロードボタンが押せるようにする
	    $("#imageFile").on("change", function() {
	    	var file = $("#imageFile")[0].files[0];
	        $("#uploadButton").prop("disabled", file == null);
	        $("#successText").text("");
	    });
	    // アップロードボタンが押されたらファイルを送信
	    $("#uploadButton").click(function(event) {
		    var file = $("#imageFile")[0].files[0];
		    var data = new FormData();
		    data.append("image", file);
		    // 送信開始
			$.ajax( {
				url: 'upload_image.php',
				method: 'post',
				dataType: "text",
				data: data,
				processData: false,
				contentType: false,
			})
			.done(function(response) {
				// 送信完了
				$("#successText").text("画像をアップロードしました。");
		        $("#uploadButton").prop("disabled", true);
		        // アップロードできてるかのテストのためにページ内にアップロードした画像を表示
		        $.get("get_image_name.php", null, function(imageFileName){
		        	$("#image").prop("src", imageFileName  + '?' + new Date().getTime());
		        });
			})
			.fail(function(jqXHR, textStatus, errorThrown) {
				$("#successText").text("画像のアップロードに失敗しました。");
			});
	    });
	});
	</script>

	<form>
		<input type="file" id="imageFile"><br>
		<input type="button" id="uploadButton" value="アップロード" disabled="true"><br>
		<p id="successText"></p>
		<img src="" id="image">
	</form>
</body>
</html>

PHPで画像を受け取って保存

upload_image.php

<?php
$file = $_FILES["image"]['tmp_name'];
$fileName = "user_image_" . ip2long($_SERVER["REMOTE_ADDR"]) . ".png";
move_uploaded_file($file, $fileName);

PHPでユーザーの画像ファイル名を取得

get_image_name.php

<?php
$fileName = "user_image_" . ip2long($_SERVER["REMOTE_ADDR"]) . ".png";
echo $fileName;

UnityでWebから画像を取得

using System.Collections;
using UnityEngine;
using UnityEngine.Networking; // ←Unityが用意したネットワーク関連の名前空間

// 背景画像をサーバーから読み込み
public class BackgroundLoader : MonoBehaviour
{
	// テクスチャを設定するマテリアル
	public Material backgroundMaterial;

	IEnumerator Start()
	{
		// サーバーのURLを定義
		var serverURL = "https://サーバーURL";

		// ユーザーの画像ファイル名取得リクエストを定義
		var getImageNameRequest = UnityWebRequest.Get(serverURL + "/get_image_name.php");
		// 通信を開始して待機
		yield return getImageNameRequest.SendWebRequest();
		// エラー判定
		if (getImageNameRequest.isNetworkError || getImageNameRequest.isHttpError) {
			// 通信エラーの際の処理
			Debug.LogError("画像ファイルの名前取得に失敗しました。");
		}
		// 画像ファイル名を取得
		var imageFileName = getImageNameRequest.downloadHandler.text;

		// 画像ファイルダウンロードリクエストを定義
		var imageDownloadHandler = new DownloadHandlerTexture(true);
		var downloadImageRequest = UnityWebRequest.Get(serverURL + "/" + imageFileName);
		downloadImageRequest.downloadHandler = imageDownloadHandler;

		// 通信を開始して待機
		yield return downloadImageRequest.SendWebRequest();
		// エラー判定
		if (downloadImageRequest.isNetworkError || downloadImageRequest.isHttpError) {
			// 通信エラーの際の処理
			Debug.LogError("画像のダウンロードに失敗しました。");
		}
		// 画像テクスチャを取得
		var imageTexture = imageDownloadHandler.texture;

		// テクスチャをマテリアルに設定
		backgroundMaterial.mainTexture = imageTexture;
	}
}

// UnityでWebからデータを取ってくる方法を検索するとWWWというクラスを使うものが多いと思いますが、
// これは古い情報なので今はUnityWebRequestを使いましょう。

こんな感じでいかがでしょうか。

投稿2018/01/27 00:08

編集2018/01/27 23:27