Is it possible to code png's similar to a grid?

Would it be possible to take a larger (let's say 100 x 100) png, and turn it into a grid so that a smaller (10 x 10) png can be moved around inside of it?

What I'm trying to do is to make the larger png a "background grid", and the smaller png a "player token", and code it in a way so that the player can accept inputs to move around the grid.

So far I've been able to import png's and display them using the imshow() function, and I've been able to overlay a png over a normal plot, but I was wondering if it would be possible to combine these concepts

Answer 1

[DGM]

The question is a bit unclear, but maybe this is something in the right direction:

% some images
[fg,~,fga] = imread('sadberry_rgba.png');
bg = imread('bg.png');

% this has to be known
gridpitch = [20 20];
fgsize = size(fga);

% display the background
imshow(bg); hold on

% display the sprite at various locations atop the background
nsprites = 17;
spritehandles = gobjects(nsprites,1);
for k = 1:nsprites
    gridpos = randi([1 10],1,nsprites);
    spritehandles(k) = placesprite(fg,fga,gridpos,gridpitch,fgsize);
end

% move one of the sprites to [1 1] on the grid
pause(1) % pause for a second
movesprite(spritehandles(1),[1 1],gridpitch,fgsize); % move it

function movesprite(hi,gridposnew,gridpitch,fgsize)
    [x y] = gridpos2impos(gridposnew,gridpitch,fgsize);
    hi.XData = x; % just udpate the properties
    hi.YData = y;
end

function hi = placesprite(fg,fga,gridpos,gridpitch,fgsize)
    [x y] = gridpos2impos(gridpos,gridpitch,fgsize);
    hi = imshow(fg,'xdata',x,'ydata',y);
    hi.AlphaData = fga; % include the image alpha
end

function [x,y] = gridpos2impos(gridpos,gridpitch,fgsize)
    x = (gridpos(1)-1)*gridpitch(1) + [1 fgsize(1)];
    y = (gridpos(2)-1)*gridpitch(2) + [1 fgsize(2)];
end

The plot updating obviously doesn't work on the forum, but when run, you should notice one of the sprites getting moved after 1 second.

Answer 2

[Walter Roberson]

Would it be possible to take a larger (let's say 100 x 100) png, and turn it into a grid so that a smaller (10 x 10) png can be moved around inside of it?

Sorry, No, the PNG file format does not support tiles.

In order to have a chance of doing anything similar to that, you would have to use a file format such as TIFF that supports tiles. You would have to get into the details of Tiff to figure out how to read and write tiles -- it is not really "hard" but it is a bit complicated until you are accustomed to it.

[Walter Roberson]

Reminder:

PNG is a file format for storing images on disk. Once the image has been read in by way of functions such as imread() then what you have is an array of pixels in memory. Once you have an array of pixels in memory, then MATLAB does not care how you got the array of pixels.

IMG = randi([0 255], 320, 480, 3, 'uint8');
imwrite(IMG, 'test.png');
IMGpng = imread('test.png');
imwrite(IMG, 'test.tif');
IMGtiff = imread('test.tif');

isequal(IMG, IMGpng)

ans = logical
   1

isequal(IMG, IMGtiff)

ans = logical
   1

whos IMG IMGpng IMGtiff

  Name           Size                Bytes  Class    Attributes

  IMG          320x480x3            460800  uint8              
  IMGpng       320x480x3            460800  uint8              
  IMGtiff      320x480x3            460800  uint8              

Random data numerically generated; data read from a PNG file; data read from a TIFF file: all three show up as uint8 and are identical to each other. (You have to take special precautions if you try this with a JPEG file)

So... I recommend that you reconsider what you are doing. I recommend considering instead reading in an image from a file (that might happen to be PNG), and breaking up the resulting array of pixels into memory blocks, and moving the memory blocks around, and possibly eventually writing the result to an image file (that might happen to be PNG)

The difference is in what you are manipulating. In your original question, you are asking to move blocks around in the png file -- which is a problem because PNG files are not block-oriented. Whereas if you move around blocks of memory there is no problem... and you can write the result to PNG file when you are finished.