How to render a ton of images or do something like this?

Help and Feedback Art Design Support
, ,
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    I want to make something like this,
    image
    each circle image thingy will light up if the people like the ideology, 234 images sounds like a bad idea. Is there any other way to achieve this?
    image from: World Of Revolution

  2. What is the issue? Include screenshots / videos if possible!
    234 images seems laggy and inefficient, I don’t know any other ways.

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?’
    I haven’t tried much but i have seen multiple guis lag your game.

After that, you should include more details if you have any. Try to make your topic as descriptive as possible, so that it’s easier for people to help you!

#2

hacky Method requires alot of patience,

first, get the image you wish

second, create tons of copies of it ( the image ) create like the amount of the same image, but with 1 circle highlighted, 2 circles, etc

third, create a MODULE, put all images there ( you can create like this:

local thismodule = {}

[1] = "rbxassetid//129481298 the number here",
[2] = "rbxassetid//129481298 the number here",
[3] = "rbxassetid//129481298 the number here",
[4] = "rbxassetid//129481298 the number here",
[5] = "rbxassetid//129481298 the number here",



etc
return thismodule

fourth, Create the UI with ‘‘500’’ circles or whatever you need, and put it visible somewhere

scripthing stuff will begin in the Last step

Last step: if, for example, the number is 250, the image that will display under the [Original Image with black circles] will be the image with 250 Highlighted Circles

the module will not lag your game, and you will not need tons of frames and images, only two

and whenever the number changes, just change it, looks easy, but takes time

btw 500 copies will be a pain lol, but this is the ''hacky method"

1 Like
#3

Thank you! I’ll get back to you when i try it!

#4

I’m quite confused, sorry,

image
image1439×899 74.9 KB

in the second step, when you said to create tons of copy, will it look like this or am I completely going in a different direction?

1 Like
#5

you are going in a different direction, give me a second and i will post an example, real quick

#6

oh, alright, i don’t quite get it, thank you btw

#7

this is a module script

to make it work you need to understad correctly how to use them

and how to use values inside them [ called via Local Scripts]

– Local script –


local players = game:GetService("Players")
local player = players.LocalPlayer or players.PlayerAdded:Wait()
local RS = game:GetService("ReplicatedStorage")

local PlrGui = player:WaitForChild("PlayerGui")

local imagesModule = require(RS:WaitForChild("ImagesMod")

local number = 0


local function ChangeNumbers()
number = number + 1 -- will increase the number count by +1

if number == 1 then
   PlrGui:WaitForChild("List_Dots").Image = imagesModule[number] 

     else if number == 2 then
       PlrGui:WaitForChild("List_Dots").Image = imagesModule[number] 

        else if number == 3 then
         PlrGui:WaitForChild("List_Dots").Image = imagesModule[number] 

           else if number > 3 then
                 number = 0 -- RESETS the display, since number is 0, you can change this

            end
         end
      end
   end
end

ChangeNumbers() -- +1
print"the number was changed..."

print"waiting 2 seconds before changing again"
task.wait(2)
ChangeNumbers() -- +1

print"number will be changed last time after 2 seconds"
task.wait(2)

ChangeNumbers() -- +1

print"Done"



-- PLEASE --

make sure this is inside a MODULE script [INSIDE REPLICATED storage]

or else everything will explode in the game and will not work properly since i already created references above

local imagesMod = { -- please, again, make sure to insert your own images-
	
	
	[3] = "11330835893", -- Three Dots --  MAKE SURE to put your own IDS from roblox
	[2] = "11330849100", -- Two Dots -- change it
	[1] = "11330850566", -- One Dot -- change it



}

return imagesMod

alright lemme explain the imagesModule[number]

when the script starts, it will increase the numbers automatically ( if everything is alright and you dind’t missed a single variable) by default, after a few seconds, it will print and show the image changing (image and number too)

some explanation:

this imagesModule[number] means:

imagesModule << The reference of the module, the variable itself, since a variable is just a mere reference

[number] means, ACCORDING to the number displayed in the script

then the script will search INSIDE THE imagesModule the NUMBER displayed

that means, if this number doens’t exist, then it will thrown some error…

and after a few seconds, the number will change, for the sake of this ‘‘tutorial’’ and explanation

this was the result:

exppppp
exppppp742×270 112 KB

as you can see, i uploaded 3 images, this is how the template should be, kinda something like that, i tested and the image change slowly, also i’m using A SINGLE IMAGELABEL thing, CALLED List_Dots

this is very efficient since you will only change IDS and not using alot of ‘‘Frames’’ or duplicates of imagelabel

also you noticed the ‘‘ImageLabel’’ thing, yea, place it on StarterGui

don’t forget about the module inside Replicated storage

if something goes wrong, paste all script here and i will check whats wrong

1 Like
#8

So it’s like a frame for each number, if I want to highlight one dot, I’ll have to change the Image Id to an image with the highlighted dot? that’s what I’m understanding atleast.

#9

yes, something like that, in the end, its just a [sequence of IDS of images]
but you must modify the same image over and over again to your liking

1 Like
#10

Ah, alright thank you so much! this is gonna be a pain, i’ll just make 50 sequences of images

1 Like