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.

Recommended Answers

All 9 Replies

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

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 :)


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)

# red rectangle is drawn with corner 
# coordinates x1=50, y1=50 and x2=350, y2=350

# draw a smaller blue rectangle on top of the larger one



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.


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')

# 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)

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!


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

Thank-you so much :)


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:


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
        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)

# 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


Note: This is Python code!

: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 ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.