teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

2019/01/10 12:16

投稿

tomo1998
tomo1998

スコア34

title CHANGED
@@ -1,1 +1,1 @@
1
- 背景のみ透明になるCanvasを作成したい
1
+ Canvas地色の透明にしたい
body CHANGED
File without changes

3

コード追加

2019/01/10 12:16

投稿

tomo1998
tomo1998

スコア34

title CHANGED
File without changes
body CHANGED
@@ -62,6 +62,14 @@
62
62
 
63
63
  ![イメージ](6ec67c795b06530198e75566ac5072c5.png)
64
64
 
65
+ Back_Ground_Layer=tk.Cancas.....
66
+ Character_Layer=tk.Cancas.....
67
+ Object_Layer=tk.Cancas.....
68
+
69
+ ゲームの背景=Back_Ground_Layer.create_image.....
70
+ キャラクター=Character_Layer.create_image.....
71
+ 手前側オブジェクト=Object_Layer.create_image.....
72
+
65
73
  しかしそこで他の問題がありまして・・・
66
74
  実は、Canvasを作成するときには、Canvasの地色も設定しないといけないのですが、この地色が問題なのです。
67
75
  地色を透明に出来れば、下に来るCanvasのアイテムも見れるようになるのですが、透明になれなければ下のCanvasを覆いかぶさなってしまいます。

2

内容と画像の追加

2019/01/10 12:15

投稿

tomo1998
tomo1998

スコア34

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,24 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- GUIを使っゲームを作っているのですが、画面表示を昔のゲームの様に、スプライトを使ったものにしたいと考えています。
3
+ 今tkinterのCanvasを使っゲームを作っています。
4
- つまり、背景画像表示を担当するCanvas,キャラ表示を担当するCanvasを作成してそれを重ね合わせて作る、といった感じです。
5
- しかしそのためにはまず手前に来るCanvas,つまりキャラ表示を担当するCanvasの背景(物が配置されていない部分)を透明化させて後ろ側に来る背景の画像を表示するCanvasを見えるようにする必要があります。
6
- しかし、どうもうまく行きません・・・
7
4
 
5
+ しかし1つ問題があり、canvasではオブジェクト同士が重なると、新しく作成されたオブジェクトのほうが上の様に来るようになります。
6
+
7
+ 例えば、ゲーム内の画面では、背景の上にキャラクターが来て、キャラクターの前に手前側オブジェクトが来る、といった仕組みになっているのでこれを作成しようと思えば・・・
8
+ canvas=tk.Cancas.....
9
+ ゲームの背景=canvas.create_image.....
10
+ キャラクター=canvas.create_image.....
11
+ 手前側オブジェクト=canvas.create_image.....
12
+ といった順番で作成されます。
13
+
14
+ しかし、ゲーム中で新しいキャラクターを登場させることになれば、それは手前側オブジェクトよりも新しく作成されることになるので、その新しいキャラクターとオブジェクトが重なったら、キャラクターが手前側に来てしまいます。
15
+
16
+ つまり、
17
+ 手前側オブジェクト=canvas.create_image.....
18
+ の後で
19
+ キャラクター2=canvas.create_image.....
20
+ をすると、キャラクター2が手前側オブジェクトの前に来てしまう。
21
+
8
22
  ### 該当のソースコード
9
23
 
10
24
  ```python
@@ -41,11 +55,19 @@
41
55
 
42
56
 
43
57
  ### 試したこと
44
- Canvas作成時に
45
- tk.Canvas(bg="Transparent")とか書いてみたりしましたがダメでした・・・
58
+ そこでこの問題を解決するには、1つのCanvas上に画像を生成するのではなく、ゲーム背景専用、キャラークター専用そして手前側オブジェクト専用のCanvasを作成して、Canvasを重ね合わせて、それぞれのオブジェクト(ゲーム背景、キャラクター、オブジェクト)をそれぞれの対応するCanvas(ゲーム背景専用、キャラークター専用そして手前側オブジェクト専用)で作成すれば問題は解決できると思うんです。
46
59
 
60
+ つまり、1つのCanvasの上にすべての画像を作成しようとすると、新しいもの順に表示されてしまうけど
47
- ネット調べこちらサイトを拝見したです、tkinterで作成た画面を丸ご透明るという方法を使っていました。しかしこれでは画面上生成したものが透明にってしまいま( ̄▽ ̄;)
61
+ それぞれのCanvas新しい画像を生成し上にはほかCanvasあるからっかり期待した順番表示され という感じになると思うんで
48
- https://stackoverflow.com/questions/42869590/python-tkinter-canvas-transparent?noredirect=1&lq=1
49
62
 
63
+ ![イメージ](6ec67c795b06530198e75566ac5072c5.png)
64
+
65
+ しかしそこで他の問題がありまして・・・
66
+ 実は、Canvasを作成するときには、Canvasの地色も設定しないといけないのですが、この地色が問題なのです。
67
+ 地色を透明に出来れば、下に来るCanvasのアイテムも見れるようになるのですが、透明になれなければ下のCanvasを覆いかぶさなってしまいます。
68
+
69
+ そこで、Canvasの地色を透明にする方法を探しているのですが・・・どうすればいいでしょうか?
70
+ また、他の解決方法などはありますでしょうか?
71
+
50
72
  もう少し調べてみたところ、外国語のサイトでちらっと、pygameモジュールを使って透明なスプライトが作れる、といったページを見かけたのですが、tkinterで背景だけが透明なスプライトを作成するのは無理なのでしょうか?
51
73
  また、pygameのモジュールで背景が透明なスプライトを作ることは可能なのでしょうか?

1

コードを追加

2019/01/10 12:13

投稿

tomo1998
tomo1998

スコア34

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,41 @@
5
5
  しかしそのためにはまず手前に来るCanvas,つまりキャラ表示を担当するCanvasの背景(物が配置されていない部分)を透明化させて後ろ側に来る背景の画像を表示するCanvasを見えるようにする必要があります。
6
6
  しかし、どうもうまく行きません・・・
7
7
 
8
+ ### 該当のソースコード
9
+
10
+ ```python
11
+ import tkinter as tk
12
+
13
+ class App(object):
14
+ def GUI(self):
15
+ root=tk.Tk()
16
+ root.geometry("300x300")
17
+ img001=tk.PhotoImage(file="picture001.png")
18
+ img002=tk.PhotoImage(file="picture002.png")
19
+
20
+ #奥側のCanvas
21
+ Background_Layer=tk.Canvas(width=400, height=400)
22
+ Background_Layer.place(x=0,y=0)
23
+ #手前のCanvas
24
+ Floor_Layer=tk.Canvas(width=400, height=400)
25
+ Floor_Layer.place(x=0,y=0)
26
+
27
+ #奥側のCanvasに書くもの
28
+ Background_Img=Background_Layer.create_image(220, 220, image=img001)
29
+ #手前のCanvasに書くもの
30
+ item_Img=Floor_Layer.create_image(20, 20, image=img002)
31
+
32
+ #id = Floor_Layer.create_bitmap(0, 0,bitmap=img002)うまく行かなかった・・・
33
+
34
+ root.mainloop()
35
+
36
+
37
+ app=App()
38
+ app.GUI()
39
+
40
+ ```
41
+
42
+
8
43
  ### 試したこと
9
44
  Canvas作成時に
10
45
  tk.Canvas(bg="Transparent")とか書いてみたりしましたがダメでした・・・