Can I change from shapes to graphics? (app reskinning)

I am brand new to app reskinning (and coding in general), but I have run into the same problem with a couple of the source codes I purchased. the apps use shapes as the “characters”, but I would like to replace them with graphics. In other words, instead of simply choosing a Fill Color, I want to use my own images.

I contacted one of the developers for one of the apps, who told me that to do this would require rewriting a large part of the code. I’ve been trying to figure it out myself with Google, but I’m stuck. I’m willing to put in the work of rewriting it if someone could point me in the right direction, or even suggest a tutorial showing the process.

I would like the ball_player to display my chosen graphics:

[lua]–local Settings = display.newImage(“images/Settings.png”);
Settings.x = FrameXPos2;
Settings.y = _H / 2;
Settings:scale(_H / 1300, _H / 1280);

Ball_Player = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 600)) --(9 +((7 - PlayerSpeed) * 5 ))
Ball_Player:setFillColor(1, 1, 1, 1);
Ball_Player.alpha = 0;

Ball_Player1 = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))
Ball_Player1:setFillColor(1, 1, 1, 1);
Ball_Player1.alpha = 0;

Ball_Player2 = display.newCircle( Player2X, Player2Y, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))
Ball_Player2:setFillColor(1, 1, 1, 1);
Ball_Player2.alpha = 0;

Ball_Enemy1 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));
Ball_Enemy1:setFillColor(0.8, 0.2, 0.2);
Ball_Enemy1.alpha = 0;[lua]

There is no reason:

Ball_Player = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 600)) --(9 +((7 - PlayerSpeed) * 5 ))

can’t become:

Ball_Player = display.newImageRect(“someimage.png”, imagesWidth, imagesHeight)

Ball_Player.x = PlayerX

Ball_Player.y = PlayerY

The only gotcha is you would have to figure out what the right sized image would be.  I can’t tell from the code what GameScreen.width is, so the formula  (25 * ((GameScreen.width * (_H / 1300))) / 600)) is hard to reference.  The code after the double minus sign (–) is commented out and not used.

But that’s one instance. How many of these are there?  Can you use that formula to get the right size for the images?  That value returns the radius of the circle, so lets say it returns 50.  The diameter of the circle will be 100, which means its bounding box is 100 x 100 in size which would be the desired height/width for your replacement image.

Rob

Thanks for your reply, Rob!

I have included what I assume is all of the code for the images, so that maybe you can point me in the right direction to figure out the correct size for my images. I believe the Game Screen dimensions are included…

[lua]-- Placing them images

local Background = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background:setFillColor(0, 140/255, 187/255);

Background.alpha = 0;

local Background2 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background2:setFillColor(41/255, 165/255, 120/255);

Background2.alpha = 0;

local Background3 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background3:setFillColor(41/255, 165/255, 64/255);

Background3.alpha = 0;

local Background4 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background4:setFillColor(200/255, 142/255, 49/255);

Background4.alpha = 0;

local Background5 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background5:setFillColor(19/255, 13/255, 13/255);

Background5.alpha = 0;

local mpBackground = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground:setFillColor(0, 140/255, 187/255);

mpBackground.alpha = 0;

local mpBackground2 = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground2:setFillColor(41/255, 165/255, 120/255);

mpBackground2.alpha = 0;

local mpBackground3 = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground3:setFillColor(41/255, 165/255, 64/255);

mpBackground3.alpha = 0;

local mpBackground4 = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground4:setFillColor(19/255, 13/255, 13/255);

mpBackground4.alpha = 0;

local GameScreen = display.newImage(“images/GameScreen.png”);

GameScreen.x = FrameXPos2;

GameScreen.y = _H / 2;

GameScreen:scale(_H / 1300, _H / 1280);

local MultiplayerScreen = display.newImage(“images/MultiplayerScreen.png”);

MultiplayerScreen.x = FrameXPos0;

MultiplayerScreen.y = _H / 2;

MultiplayerScreen:scale(_H / 1300, _H / 1280);

local MultiOptions = display.newImage(“images/Circle.png”);

MultiOptions.x = FrameXPos0;

MultiOptions.y = _H / 2;

MultiOptions:scale(_H / 1300, _H / 1280);

MultiOptions.alpha =     1;

local MultiOpArrows = display.newImage(“images/MultiOptions2.png”);

MultiOpArrows.x = FrameXPos0;

MultiOpArrows.y = _H * 0.5;

MultiOpArrows:scale(_H / 1300, _H / 1280);

local ScoreMap = display.newImage(“images/Score.png”);

ScoreMap.x = FrameXPos2;

ScoreMap.y = _H * 0.341;

ScoreMap:scale(_H / 1300, _H / 1280 );

ScoreMap.alpha = 0;

local Instructions = display.newImage(“images/Instructions.png”);

Instructions.x = FrameXPos2

Instructions.y = _H * 0.29;

Instructions:scale(_H / 1300, _H / 1280);

Instructions.alpha = 0.3;

local Settings = display.newImage(“images/Settings.png”);

Settings.x = FrameXPos2;

Settings.y = _H / 2;

Settings:scale(_H / 1300, _H / 1280);

Ball_Player = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 600)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player:setFillColor(1, 1, 1, 1);

Ball_Player.alpha = 0;

Ball_Player1 = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player1:setFillColor(1, 1, 1, 1);

Ball_Player1.alpha = 0;

Ball_Player2 = display.newCircle( Player2X, Player2Y, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player2:setFillColor(1, 1, 1, 1);

Ball_Player2.alpha = 0;

Ball_Enemy1 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy1:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy1.alpha = 0;

Ball_Enemy2 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy2:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy2.alpha = 0;

Ball_Enemy3 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy3:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy3.alpha = 0;

Ball_Enemy4 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy4:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy4.alpha = 0;

Ball_Enemy5 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy5:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy5.alpha = 0;[/lua]

It’s really hard to answer your question without more context.  I don’t know what’s going on with the GameScreen object.  I don’t know what _H and _W are (you haven’t posted the config.lua and even then I’d have to guess).

Maybe if you post more relevant code (don’t just dump a big block of code), we might be able to help a little.

Rob

Hey, thanks again for the reply!

It’s obvious I have no idea what I’m doing, as I’m so far out of my depth I don’t know what most of the terms mean, let alone which part of the code I need to post to get my question answered! I think I may just have to put this on hold, or at least just stick to changing the colors (that I CAN do lol) until I learn the basics. Thanks again for trying to help!

So, I decided to give this a try again, and I think I almost have it fixed, except that now, I have black circles where my graphics should be! What did I do wrong? Here is what the code was before:

[lua]Ball_Player1 = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player1:setFillColor(1, 1, 1, 1);

Ball_Player1.alpha = 0;

Ball_Player2 = display.newCircle( Player2X, Player2Y, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player2:setFillColor(1, 1, 1, 1);

Ball_Player2.alpha = 0;

Ball_Enemy1 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy1:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy1.alpha = 0;

Ball_Enemy2 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy2:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy2.alpha = 0;

Ball_Enemy3 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy3:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy3.alpha = 0;

Ball_Enemy4 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy4:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy4.alpha = 0;

Ball_Enemy5 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy5:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy5.alpha = 0;[/lua]

And here is what I changed it to:

[lua]Ball_Player = display.newCircle( 0, 0, 31.5)  --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player.x = display.contentCenterX

Ball_Player.y = display.contentCenterY

Ball_Player.fill = {“images/player.png”}

Ball_Player1 = display.newCircle( 0, 0, 31.5 )

Ball_Player1.x = display.contentCenterX

Ball_Player1.y = display.contentCenterY

Ball_Player1.fill = {“images/playerearth.png”}

Ball_Player2 = display.newCircle( 0, 0, 31.5)

Ball_Player2.x = display.contentCenterX

Ball_Player2.x = display.contentCenterY

Ball_Player2.fill = {“images/playermoon.png”}

Ball_Enemy1 = display.newCircle( 0, 0, 31.5)

Ball_Enemy1.x = display.contentCenterX

Ball_Enemy1.y = display.contentCenterY

Ball_Enemy1.fill = {“images/enemy1.png”}

Ball_Enemy2 = display.newCircle( 0, 0, 31.5)

Ball_Enemy2.x = display.contentCenterX

Ball_Enemy2.y = display.contentCenterY

Ball_Enemy2.fill = {“images/enemy2.png”}

Ball_Enemy3 = display.newCircle( 0, 0, 31.5 )

Ball_Enemy3.x = display.contentCenterX

Ball_Enemy3.y = display.contentCenterY

Ball_Enemy3.fill = {“images/enemy3.png”}

Ball_Enemy4 = display.newCircle( 0, 0, 31.5 )

Ball_Enemy4.x = display.contentCenterX

Ball_Enemy4.y = display.contentCenterY

Ball_Enemy4.fill = {“images/enemy4.png”}

Ball_Enemy5 = display.newCircle( 0, 0, 31.5 )

Ball_Enemy5.x = display.contentCenterX

Ball_Enemy5.y = display.contentCenterY

Ball_Enemy5.fill = {“images/enemy5.png”}[/lua]

Again, any guidance would be appreciated.

You’re close:

Ball_Enemy4.fill = {type = “image”, filename =“images/enemy4.png”}

See: https://docs.coronalabs.com/api/type/ShapeObject/fill.html

Rob

Got it, Rob thanks so much!

There is no reason:

Ball_Player = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 600)) --(9 +((7 - PlayerSpeed) * 5 ))

can’t become:

Ball_Player = display.newImageRect(“someimage.png”, imagesWidth, imagesHeight)

Ball_Player.x = PlayerX

Ball_Player.y = PlayerY

The only gotcha is you would have to figure out what the right sized image would be.  I can’t tell from the code what GameScreen.width is, so the formula  (25 * ((GameScreen.width * (_H / 1300))) / 600)) is hard to reference.  The code after the double minus sign (–) is commented out and not used.

But that’s one instance. How many of these are there?  Can you use that formula to get the right size for the images?  That value returns the radius of the circle, so lets say it returns 50.  The diameter of the circle will be 100, which means its bounding box is 100 x 100 in size which would be the desired height/width for your replacement image.

Rob

Thanks for your reply, Rob!

I have included what I assume is all of the code for the images, so that maybe you can point me in the right direction to figure out the correct size for my images. I believe the Game Screen dimensions are included…

[lua]-- Placing them images

local Background = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background:setFillColor(0, 140/255, 187/255);

Background.alpha = 0;

local Background2 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background2:setFillColor(41/255, 165/255, 120/255);

Background2.alpha = 0;

local Background3 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background3:setFillColor(41/255, 165/255, 64/255);

Background3.alpha = 0;

local Background4 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background4:setFillColor(200/255, 142/255, 49/255);

Background4.alpha = 0;

local Background5 = display.newRect(FrameXPos1, _H / 2, _W + 50, _H + 60);

Background5:setFillColor(19/255, 13/255, 13/255);

Background5.alpha = 0;

local mpBackground = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground:setFillColor(0, 140/255, 187/255);

mpBackground.alpha = 0;

local mpBackground2 = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground2:setFillColor(41/255, 165/255, 120/255);

mpBackground2.alpha = 0;

local mpBackground3 = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground3:setFillColor(41/255, 165/255, 64/255);

mpBackground3.alpha = 0;

local mpBackground4 = display.newRect(FrameXPos1, _H * 0.75, _W + 50, _H / 2);

mpBackground4:setFillColor(19/255, 13/255, 13/255);

mpBackground4.alpha = 0;

local GameScreen = display.newImage(“images/GameScreen.png”);

GameScreen.x = FrameXPos2;

GameScreen.y = _H / 2;

GameScreen:scale(_H / 1300, _H / 1280);

local MultiplayerScreen = display.newImage(“images/MultiplayerScreen.png”);

MultiplayerScreen.x = FrameXPos0;

MultiplayerScreen.y = _H / 2;

MultiplayerScreen:scale(_H / 1300, _H / 1280);

local MultiOptions = display.newImage(“images/Circle.png”);

MultiOptions.x = FrameXPos0;

MultiOptions.y = _H / 2;

MultiOptions:scale(_H / 1300, _H / 1280);

MultiOptions.alpha =     1;

local MultiOpArrows = display.newImage(“images/MultiOptions2.png”);

MultiOpArrows.x = FrameXPos0;

MultiOpArrows.y = _H * 0.5;

MultiOpArrows:scale(_H / 1300, _H / 1280);

local ScoreMap = display.newImage(“images/Score.png”);

ScoreMap.x = FrameXPos2;

ScoreMap.y = _H * 0.341;

ScoreMap:scale(_H / 1300, _H / 1280 );

ScoreMap.alpha = 0;

local Instructions = display.newImage(“images/Instructions.png”);

Instructions.x = FrameXPos2

Instructions.y = _H * 0.29;

Instructions:scale(_H / 1300, _H / 1280);

Instructions.alpha = 0.3;

local Settings = display.newImage(“images/Settings.png”);

Settings.x = FrameXPos2;

Settings.y = _H / 2;

Settings:scale(_H / 1300, _H / 1280);

Ball_Player = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 600)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player:setFillColor(1, 1, 1, 1);

Ball_Player.alpha = 0;

Ball_Player1 = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player1:setFillColor(1, 1, 1, 1);

Ball_Player1.alpha = 0;

Ball_Player2 = display.newCircle( Player2X, Player2Y, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player2:setFillColor(1, 1, 1, 1);

Ball_Player2.alpha = 0;

Ball_Enemy1 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy1:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy1.alpha = 0;

Ball_Enemy2 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy2:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy2.alpha = 0;

Ball_Enemy3 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy3:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy3.alpha = 0;

Ball_Enemy4 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy4:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy4.alpha = 0;

Ball_Enemy5 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy5:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy5.alpha = 0;[/lua]

It’s really hard to answer your question without more context.  I don’t know what’s going on with the GameScreen object.  I don’t know what _H and _W are (you haven’t posted the config.lua and even then I’d have to guess).

Maybe if you post more relevant code (don’t just dump a big block of code), we might be able to help a little.

Rob

Hey, thanks again for the reply!

It’s obvious I have no idea what I’m doing, as I’m so far out of my depth I don’t know what most of the terms mean, let alone which part of the code I need to post to get my question answered! I think I may just have to put this on hold, or at least just stick to changing the colors (that I CAN do lol) until I learn the basics. Thanks again for trying to help!

So, I decided to give this a try again, and I think I almost have it fixed, except that now, I have black circles where my graphics should be! What did I do wrong? Here is what the code was before:

[lua]Ball_Player1 = display.newCircle( PlayerX, PlayerY, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player1:setFillColor(1, 1, 1, 1);

Ball_Player1.alpha = 0;

Ball_Player2 = display.newCircle( Player2X, Player2Y, (25 * ((GameScreen.width * (_H / 1300))) / 700)) --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player2:setFillColor(1, 1, 1, 1);

Ball_Player2.alpha = 0;

Ball_Enemy1 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy1:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy1.alpha = 0;

Ball_Enemy2 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy2:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy2.alpha = 0;

Ball_Enemy3 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy3:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy3.alpha = 0;

Ball_Enemy4 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy4:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy4.alpha = 0;

Ball_Enemy5 = display.newCircle( PlayerX, PlayerY, (35 * ((GameScreen.width * (_H / 1300))) / 600));

Ball_Enemy5:setFillColor(0.8, 0.2, 0.2);

Ball_Enemy5.alpha = 0;[/lua]

And here is what I changed it to:

[lua]Ball_Player = display.newCircle( 0, 0, 31.5)  --(9 +((7 - PlayerSpeed) * 5 ))

Ball_Player.x = display.contentCenterX

Ball_Player.y = display.contentCenterY

Ball_Player.fill = {“images/player.png”}

Ball_Player1 = display.newCircle( 0, 0, 31.5 )

Ball_Player1.x = display.contentCenterX

Ball_Player1.y = display.contentCenterY

Ball_Player1.fill = {“images/playerearth.png”}

Ball_Player2 = display.newCircle( 0, 0, 31.5)

Ball_Player2.x = display.contentCenterX

Ball_Player2.x = display.contentCenterY

Ball_Player2.fill = {“images/playermoon.png”}

Ball_Enemy1 = display.newCircle( 0, 0, 31.5)

Ball_Enemy1.x = display.contentCenterX

Ball_Enemy1.y = display.contentCenterY

Ball_Enemy1.fill = {“images/enemy1.png”}

Ball_Enemy2 = display.newCircle( 0, 0, 31.5)

Ball_Enemy2.x = display.contentCenterX

Ball_Enemy2.y = display.contentCenterY

Ball_Enemy2.fill = {“images/enemy2.png”}

Ball_Enemy3 = display.newCircle( 0, 0, 31.5 )

Ball_Enemy3.x = display.contentCenterX

Ball_Enemy3.y = display.contentCenterY

Ball_Enemy3.fill = {“images/enemy3.png”}

Ball_Enemy4 = display.newCircle( 0, 0, 31.5 )

Ball_Enemy4.x = display.contentCenterX

Ball_Enemy4.y = display.contentCenterY

Ball_Enemy4.fill = {“images/enemy4.png”}

Ball_Enemy5 = display.newCircle( 0, 0, 31.5 )

Ball_Enemy5.x = display.contentCenterX

Ball_Enemy5.y = display.contentCenterY

Ball_Enemy5.fill = {“images/enemy5.png”}[/lua]

Again, any guidance would be appreciated.

You’re close:

Ball_Enemy4.fill = {type = “image”, filename =“images/enemy4.png”}

See: https://docs.coronalabs.com/api/type/ShapeObject/fill.html

Rob

Got it, Rob thanks so much!