teratail
回答率
85.48%
質問するログイン新規登録
トップUnity2Dに関する質問Unityで背景画像をユーザーが自由に変える機能

編集履歴

回答編集履歴

1

部分的なソースだったので全体を追加

2018/01/27 23:27

投稿

Ushimaru
Ushimaru

スコア69

test CHANGED
@@ -1,4 +1,162 @@
1
+ WebGLであれば画像のアップロードはUnityからやるよりもブラウザからやった方が簡単だと思うのでブラウザからのアップロードにしてみました。
2
+
3
+
4
+
5
+ また、ファイルをアップロードしたユーザーとゲームをプレイしているユーザーをどう関連付けるかが悩んだのですが、
6
+
7
+ 今回はIPアドレスで判断することにしました。
8
+
9
+
10
+
11
+ ## HTMLとJavaScript(JQuery)で画像をアップロード
12
+
13
+ index.html
14
+
15
+ ```
16
+
17
+ <html>
18
+
19
+ <head>
20
+
21
+ <meta charset="UTF-8">
22
+
23
+ </head>
24
+
25
+ <body>
26
+
27
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
28
+
29
+ <script>
30
+
31
+ $(function() {
32
+
33
+ // ファイルが選択されたらアップロードボタンが押せるようにする
34
+
35
+ $("#imageFile").on("change", function() {
36
+
37
+ var file = $("#imageFile")[0].files[0];
38
+
39
+ $("#uploadButton").prop("disabled", file == null);
40
+
41
+ $("#successText").text("");
42
+
43
+ });
44
+
45
+ // アップロードボタンが押されたらファイルを送信
46
+
47
+ $("#uploadButton").click(function(event) {
48
+
49
+ var file = $("#imageFile")[0].files[0];
50
+
51
+ var data = new FormData();
52
+
53
+ data.append("image", file);
54
+
55
+ // 送信開始
56
+
57
+ $.ajax( {
58
+
59
+ url: 'upload_image.php',
60
+
61
+ method: 'post',
62
+
63
+ dataType: "text",
64
+
65
+ data: data,
66
+
67
+ processData: false,
68
+
69
+ contentType: false,
70
+
71
+ })
72
+
73
+ .done(function(response) {
74
+
75
+ // 送信完了
76
+
77
+ $("#successText").text("画像をアップロードしました。");
78
+
79
+ $("#uploadButton").prop("disabled", true);
80
+
81
+ // アップロードできてるかのテストのためにページ内にアップロードした画像を表示
82
+
83
+ $.get("get_image_name.php", null, function(imageFileName){
84
+
85
+ $("#image").prop("src", imageFileName + '?' + new Date().getTime());
86
+
87
+ });
88
+
89
+ })
90
+
91
+ .fail(function(jqXHR, textStatus, errorThrown) {
92
+
93
+ $("#successText").text("画像のアップロードに失敗しました。");
94
+
95
+ });
96
+
97
+ });
98
+
99
+ });
100
+
101
+ </script>
102
+
103
+
104
+
105
+ <form>
106
+
107
+ <input type="file" id="imageFile"><br>
108
+
109
+ <input type="button" id="uploadButton" value="アップロード" disabled="true"><br>
110
+
111
+ <p id="successText"></p>
112
+
113
+ <img src="" id="image">
114
+
115
+ </form>
116
+
117
+ </body>
118
+
119
+ </html>
120
+
121
+ ```
122
+
123
+
124
+
125
+ ## PHPで画像を受け取って保存
126
+
127
+ upload_image.php
128
+
129
+ ```
130
+
131
+ <?php
132
+
133
+ $file = $_FILES["image"]['tmp_name'];
134
+
135
+ $fileName = "user_image_" . ip2long($_SERVER["REMOTE_ADDR"]) . ".png";
136
+
137
+ move_uploaded_file($file, $fileName);
138
+
139
+ ```
140
+
141
+
142
+
143
+ ## PHPでユーザーの画像ファイル名を取得
144
+
145
+ get_image_name.php
146
+
147
+ ```
148
+
149
+ <?php
150
+
151
+ $fileName = "user_image_" . ip2long($_SERVER["REMOTE_ADDR"]) . ".png";
152
+
153
+ echo $fileName;
154
+
155
+ ```
156
+
157
+
158
+
1
- ひとまずWeb上の画像をUnityで使う方法を回答します。
159
+ ## UnityでWebから画像を取得
2
160
 
3
161
  ```
4
162
 
@@ -10,10 +168,14 @@
10
168
 
11
169
 
12
170
 
171
+ // 背景画像をサーバーから読み込み
172
+
13
- public class NewBehaviourScript : MonoBehaviour
173
+ public class BackgroundLoader : MonoBehaviour
14
174
 
15
175
  {
16
176
 
177
+ // テクスチャを設定するマテリアル
178
+
17
179
  public Material backgroundMaterial;
18
180
 
19
181
 
@@ -22,37 +184,69 @@
22
184
 
23
185
  {
24
186
 
25
- // リクエストを定義
187
+ // サーバーのURLを定義
188
+
26
-
189
+ var serverURL = "https://サーバーURL";
190
+
191
+
192
+
193
+ // ユーザーの画像ファイル名取得リクエストを定義
194
+
27
- var getBackgroundTextureRequest = UnityWebRequest.Get("画像のURL"); // ←画像のURLを指定
195
+ var getImageNameRequest = UnityWebRequest.Get(serverURL + "/get_image_name.php");
28
-
29
-
30
196
 
31
197
  // 通信を開始して待機
32
198
 
33
- yield return getBackgroundTextureRequest.SendWebRequest();
199
+ yield return getImageNameRequest.SendWebRequest();
34
-
35
-
36
200
 
37
201
  // エラー判定
38
202
 
39
- if (getBackgroundTextureRequest.isNetworkError || getBackgroundTextureRequest.isHttpError) {
203
+ if (getImageNameRequest.isNetworkError || getImageNameRequest.isHttpError) {
40
204
 
41
205
  // 通信エラーの際の処理
42
206
 
207
+ Debug.LogError("画像ファイルの名前取得に失敗しました。");
208
+
43
209
  }
44
210
 
45
-
211
+ // 画像ファイル名を取得
212
+
46
-
213
+ var imageFileName = getImageNameRequest.downloadHandler.text;
214
+
215
+
216
+
217
+ // 画像ファイルダウンロードリクエストを定義
218
+
219
+ var imageDownloadHandler = new DownloadHandlerTexture(true);
220
+
221
+ var downloadImageRequest = UnityWebRequest.Get(serverURL + "/" + imageFileName);
222
+
223
+ downloadImageRequest.downloadHandler = imageDownloadHandler;
224
+
225
+
226
+
227
+ // 通信を開始して待機
228
+
229
+ yield return downloadImageRequest.SendWebRequest();
230
+
231
+ // エラー判定
232
+
233
+ if (downloadImageRequest.isNetworkError || downloadImageRequest.isHttpError) {
234
+
235
+ // 通信エラーの際の処理
236
+
237
+ Debug.LogError("画像のダウンロードに失敗しました。");
238
+
239
+ }
240
+
47
- // ダウンロードされたテクスチャを取得
241
+ // 画像テクスチャを取得
48
-
242
+
49
- var texture = ((DownloadHandlerTexture)getBackgroundTextureRequest.downloadHandler).texture;
243
+ var imageTexture = imageDownloadHandler.texture;
50
244
 
51
245
 
52
246
 
53
247
  // テクスチャをマテリアルに設定
54
248
 
55
- backgroundMaterial.mainTexture = texture;
249
+ backgroundMaterial.mainTexture = imageTexture;
56
250
 
57
251
  }
58
252
 
@@ -64,8 +258,10 @@
64
258
 
65
259
  // これは古い情報なので今はUnityWebRequestを使いましょう。
66
260
 
261
+
262
+
67
- ```
263
+ ```
68
-
69
-
70
-
264
+
265
+
266
+
71
- WebGLであれば画像のアップロードはUnityよりブラウザからやった方が簡単な気がするので、そちらも後ほど追記します。
267
+ こんな感じでいかがでしょうか。