Canvas and Layered Images

[reRanger]

Hi:

I am beginning to develop a project (game) that will be using graphics: I am trying to implement a view that is an image onto where other images will be added on "top"-- the other images do not have to move via user imput-- I just need to place them where they will "change" (a new image loaded in its place, a sort of animation). I am not needing any help with the logic\ coding of the game, just assistance with the graphics.

I am trying to make use of :TKinter, PyGame, Canvas, widgets, etc; I can easily load the "base" (1st) image, but am not able to load and position the top (2nd) image onto the base.

I am not just looking for a quick answer (although, I'd love one :mrgreen:) but I do need some help, a tutorial-- a direction. I have been researching this on-line for 3-days now, and although I have learned alot, I have not yet cracked the mystery of Canvas manipulation, pushing it to its maximum limits.

Lovin' Python! :cheesy:
Matty D.

[Ene Uran]

I agree, Python is fun! Take a look at:
http://www.daniweb.com/techtalkforums/post225611-64.html
You can modify this to fit your needs.

[reRanger]

Thanks for your reply. What I am trying to do is like this:

[IMG]http://i52.photobucket.com/albums/g31/reranger/blueblock_redblock.jpg[/IMG]
Simply, adding one image layer upon a Canvas (I presume, a "canvas" in Python) so when drawn to screen, the blue box is fixed at a particular coordinate upon the background (Red) image. Does that make sense. The background will never change, while the forground (blue square) can and will. I just need to figure out how to combine the blue square and red square.

Thank-you in advance :)

reRanger

[Ene Uran]

Are you thinking of somethig like this?

# explore Tkinter canvas.create_rectangle(x0, y0, x1, y1, option, ...)

from Tkinter import *

root = Tk()
root.title("Tkinter Rectangle")

canvas = Canvas(root, width=400, height=400)
canvas.pack()

# red rectangle is drawn with corner 
# coordinates x1=50, y1=50 and x2=350, y2=350
canvas.create_rectangle(50,50,350,350,fill='red')

# draw a smaller blue rectangle on top of the larger one
canvas.create_rectangle(150,150,250,250,fill='blue')

root.mainloop()

[reRanger]

Hello:

By reading the code I think the effect will be achieved but in a manner different from what I am seeking. I should have stated that I will be loading saved image files (bmp, etc) which will be part of the program (the blue and red square: red is larger background (photo) that will not change, smaller blue square is a "photo" that will be able to be manipulated and will change).

I will load and run this program now and see the results. If you have any other ideas please post them when you have the time. Much appreciated.

reRanger

[Ene Uran]

Sorry, shoud have read your info better. Here is a potential solution, using images, where a somewhat larger canvas forms a frame for the picture:

# image load and display using Tkinter only
# Tkinter reads only GIF and PGM/PPM images
# (for additional formats use Image, ImageTk from PIL)

from Tkinter import *

root = Tk()

# pick a GIF or PGM/PPM file you have in your working directory
imagefile = "Image1.gif"
photo1 = PhotoImage(file=imagefile)

width1 = photo1.width()
height1 = photo1.height()
# make canvas 100 pixels larger than the picture to create a frame
canvas1 = Canvas(width=width1+100, height=height1+100, bg='red')
canvas1.pack()

# anchor=CENTER is default
# x, y forms the center coordinates here, this gives image a red frame ...
x = (width1+100)/2.0
y = (height1+100)/2.0
canvas1.create_image(x, y, image=photo1)
root.mainloop()

Hope your images are pretty well fixed in size, otherwise you have to fix the size of the canvas to fit all your images. Have fun with the coding!

[reRanger]

Hi:

I think this may be it. I will let you know later.

Thank-you so much :)

reRanger

[reRanger]

Thank-you for your earlier reply :mrgreen: I tried that code snippet and it did work. But, what I am looking to do (just setting up the GUI graphics at this point) is as follows:

===============================

+ I have two GIF images named "image_1" and "image_2".

+ image_1 is a large background image (to cover entire frame, canvas)

image_2 is a smaller image which will sit ON TOP of the background GIF

+ image_1 GIF will never move or change

image_2 GIF will change throughout the game (other, different, same-sized "image_2"s replacing the previous "image_2's".

+This acts slightly as almost a slow animation, the smaller GIF changing on top of the permanent GIF background, not as a small GIF upon a machine-painted background.

2 saved images\ combined into one frame

===============================

I have been hacking and chopping many code frags using your submitted code and trying other stuff with PIL and PyGame, also. It has been great fun :cheesy:, of course, and I have learned so much today about Python (isn't that the awesome point of it all?!) but I am ready to move on past the bloody GUI and work on actual code dev for the game. I love it all-- what I am I saying?

** 2 saved GIF files- both loaded together- small GIF positioned on large GIF background= GUI for game**

Any help would be great and righteous;).
Python is growing on me and swallowing me alive like, well, a python. :lol:

reRanger

[vegaseat]

Something like this might work for you ...

# load and display several images using Tkinter
# Tkinter reads only GIF and PGM/PPM images
# (for additional formats use Image, ImageTk from PIL)

from Tkinter import *

root = Tk()
root.title("Click me!")

def next_image(event):
    """toggle between image2 and image3"""
    global toggle_flag
    global x, y, photo2, photo3
    if toggle_flag == TRUE:
        # display photo2, same center x, y
        canvas1.create_image(x, y, image=photo2)
        toggle_flag = False
    else:
        canvas1.create_image(x, y, image=photo3)
        toggle_flag = True
    
toggle_flag = True

# pick three GIF image files you have in your working directory
# image1 is larger than image2 and image3
image1 = "Red200x200.GIF"
photo1 = PhotoImage(file=image1)

image2 = "Green100x100.GIF"
photo2 = PhotoImage(file=image2)

image3 = "Blue100x100.GIF"
photo3 = PhotoImage(file=image3)

# make canvas the size of image1/photo1
width1 = photo1.width()
height1 = photo1.height()
canvas1 = Canvas(width=width1, height=height1)
canvas1.pack()

# display photo1, x, y is center (anchor=CENTER is default)
x = (width1)/2.0
y = (height1)/2.0
canvas1.create_image(x, y, image=photo1)

canvas1.bind('<Button-1>', next_image)  # bind left mouse click

root.mainloop()

Note: This is Python code!

[reRanger]

:cheesy: Thank-you so much for your coding assistance. This is pretty much what I have been trying to figure out for days now; Simply the placing of the small GIF(s) on a larger background. Sweet! Now, I am going to closely study this code and figure out exactly what it is doing.

Thanks Again,

**problem solved**

reRanger ;)