## My projects and demos

Show off your games, demos and other (playable) creations.
Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### My projects and demos

UPDATE:

This is the current game project I am working on.

Have fixed a bug with the input devices, where if the joystick/gamepad was not plugged in the program would crash.

Added os detection and input device detection.

Added primitive splash screens

=================================END==========================================

Well prepare to be underwhelmed. Any tips or advice would be greatly appreciated. I know the code is going to be pretty bad, but without peoples feedback improvement will be slow so please forgive my lack of code mastery. Lol I know its pretty nasty. But still we all start from somewhere right?

This is the character sheet scene. At the moment its generating the stats for the sheet within this scene, but in a full program its job its pretty humble, it accesses a table of statistics for the player character. A similar scene could also be created for NPCs.

Libraries abused in this technical demo..

RL-Dice - excellent little library, this is what I used to generate the player stats.

Apps used/abused.

Inkscape

And that's about it, actually in this demo it actually has more functionality than it will have in the main program. Still best to take out the low hanging fruit early.
charactersheet_1.png (69.62 KiB) Viewed 4940 times
Here is the source..

Code: Select all

-- The character sheet scene.

require("lib/RL-Dice/dice")

uiGraphics = love.graphics.newImage("assets/charsheet_1920x1080.png")
internalWidth = 1920
internalHeight = 1080
mfont = love.graphics.newFont("assets/Arkhip_font.ttf", 94)
sfont = love.graphics.newFont("assets/Arkhip_font.ttf", 64)
generatePC()
flag = love.graphics.newImage("assets/flags/shiny/128/Philippines.png")
psexicon = love.graphics.newImage("assets/Female_Dark.png")
end

function generatePC()
chancestats = {}
chancestats = {dice.roll(("(1d100)x3"))}
dice.setMin(2)
stats = {}
stats2 = {dice.roll(("(1d10)x14"))}
stats = stats2
end

function love.keypressed(key)
if key == "f1" then
generatePC()
end
if key == "escape" then
love.event.quit()
end
end

if chancestats[1] <= 50 then
psex = "f"
psexicon = love.graphics.newImage("assets/Female_Dark.png")
end
if chancestats[1] >= 51 then
psex = "m"
psexicon = love.graphics.newImage("assets/Male_Dark.png")
end
if chancestats[2] <= 8 then
pprofchoi = pprof[1]
if psex == "m" then
psexicon = love.graphics.newImage("assets/Male_Light_Rockerboy.png")
end
if psex == "f" then
psexicon = love.graphics.newImage("assets/Female_Light_Rockerboy.png")
end
end
if chancestats[2] >= 9 and chancestats[2] <= 16 then
pprofchoi = pprof[2]
if psex == "m" then
psexicon = love.graphics.newImage("assets/Male_Light_Solo.png")
end
end
if chancestats[2] >= 17 and chancestats[2] <= 24 then
pprofchoi = pprof[3]
end
if chancestats[2] >= 25 and chancestats[2] <= 32 then
pprofchoi = pprof[4]
end
if chancestats[2] >= 33 and chancestats[2] <= 40 then
pprofchoi = pprof[5]
end
if chancestats[2] >= 41 and chancestats[2] <= 48 then
pprofchoi = pprof[6]
if psex == "m" then
psexicon = love.graphics.newImage("assets/Male_Dark_Media.png")
end
if psex == "f" then
psexicon = love.graphics.newImage("assets/Female_Dark_Media.png")
end
end
if chancestats[2] >= 42 and chancestats[2] <= 56 then
pprofchoi = pprof[7]
if psex == "m" then
psexicon = love.graphics.newImage("assets/Male_Light_Cop.png")
end
end
if chancestats[2] >= 57 and chancestats[2] <= 64 then
pprofchoi = pprof[8]
if psex == "m" then
psexicon = love.graphics.newImage("assets/Male_Dark_Coperate.png")
end
end
if chancestats[2] >= 65 and chancestats[2] <= 72 then
pprofchoi = pprof[9]
end
if chancestats[2] >= 73 and chancestats[2] <= 80 then
pprofchoi = pprof[10]
end
if chancestats[2] >= 81 and chancestats[2] <= 88 then
pprofchoi = pprof[11]
end
if chancestats[2] >= 89 and chancestats[2] <= 100 then
pprofchoi = pprof[12]
end

page = 42
porg = "gb"
phit = 30
phum = stats[4] * 10
prun = stats[5] * 3
pjum = prun/4
pcar = stats[1] * 10
plug = stats[1] * 40
pname = "doc albu"
races = {"human", "highrider", "replicant", "gennie", "bioroid", "ai", "construct"}
love.graphics.setFont(mfont)
love.graphics.print(pname, 280, 245)
love.graphics.print(races[1], 1160, 245)

--love.graphics.print(pprof[12], 280, 435)
love.graphics.print(pprofchoi, 280, 435)

love.graphics.print(stats[1], 280, 615)
love.graphics.print(stats[2], 460, 615)
love.graphics.print(stats[3], 630, 615)
love.graphics.print(stats[4], 810, 615)
love.graphics.print(stats[5], 990, 615)
love.graphics.print(stats[6], 1160, 615) --
love.graphics.print(stats[7], 1340, 615)
love.graphics.print(stats[8], 1510, 615)
love.graphics.print(stats[9], 1690, 615) --
--love.graphics.print(phum, 810, 785) -- hum
--love.graphics.print(prun.."m", 980, 785)
love.graphics.setFont(sfont)
love.graphics.print(pcar, 270, 785) -- CARRY
love.graphics.print(plug, 260, 955) -- DlIFT
love.graphics.print(phum, 810, 785) -- hum
love.graphics.print(prun, 980, 785)
love.graphics.print(pjum, 960, 965)
love.graphics.setFont(mfont)
--love.graphics.print(psex, 1160, 435)
love.graphics.print(page, 1320, 435)
love.graphics.print(phit, 1500, 435)
--love.graphics.print(porg, 1690, 435)
end

function love.draw()
local screenWidth = love.graphics.getWidth()
local screenHeight = love.graphics.getHeight()
local ratio = math.min(screenWidth/internalWidth, screenHeight/internalHeight)
love.graphics.scale(ratio,ratio)
love.graphics.draw(uiGraphics, 0, 0)
love.graphics.draw(flag, 1680,425)
love.graphics.scale(0.80,0.80)
love.graphics.draw(psexicon, 1456,550)
end

My Inkscape fu is pretty weak but for now its ok just for demos ect..

The plan is to make custom avatars for the character sheet that can also be used in the game, that will come later but as you can see from the code above, eventually each class will have its own gender icon, I'll have it reflect the birth place of the character. Next step is to get the background tables coded - that's quite involved but technically pretty straight forward to implement. Like I did for the professions roll, just instead of 12 professions you have around 300 countries.. that's a job for tomorrow. Will make a separate function to handle this, then update the character sheet.

The resolution chosen was a bit weird, I wanted something that would work on most devices without too much hassle, so I went with 1920 x 1080. But that seems a poor choice now. In hindsight I should have been less lazy and just had a if ladder that selected the ui based on love.graphics.getWidth & love.graphics.getHeight. But that's a task for another day. I have a feeling it would be better to do this in a general scaling function that I could just call for every scene. Of-course it would mean that each scene would need to have its assets in multiple resolutions to work optimally but overall it might be worth it....

One definite takeaway is that figuring out the position to print the data at is time consuming, I get the feeling life would be a bit simpler if I went with the brute force approach of just generating a png sprite sheet for the numbers and letters instead of messing around with fonts in love.

A lot of these variables could do with being local, and probably being in a table to keep them tidy. that's another task for tomorrow.

Tomorrows tasks - finish character creation code, update character sheet code (going to take out the character generation code and put it in its own separate file, by tomorrow the only thing this code will be doing is reading from a table it got passed.

would like to get the numbers aligned right - but that's something I can do later.
Last edited by Pangit on Sun Jul 10, 2016 11:56 am, edited 2 times in total.
ivan
Party member
Posts: 1719
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

### Re: My projects and demos

Judging from the screenshot alone, I would say that it doesn't really look like a game screen.
It's not bad, but the there is too much text IMO.
You have several options to make it look better.
One option is to use icons instead of labels like "sex", "age", etc.
Another options is to keep the labels, but use progress bars instead of numbers so something like:

Code: Select all

Run    ****
Jump   *
Life   ***
The second option might look better in your case.
Good luck!
Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: My projects and demos

Thank you for your tips (and the kind words), I agree its a lot of information, probably more than the player needs to actually play the game. It always struck me as a little unrealistic that with traditional role-playing games you knew exactly what every statistic was. When you think about real life you rarely know exactly your true potential/limitations. For testing I want to be able to see the players statistics, but I wonder in the completed game how much could be hidden. When you think about it when the computer is taking care of the game mechanics ect. The player needs very little information on the characters abilities.

But during the development I want a sanity check - so its good to be able to query the NPCs stats/abilities to test various parts of the game ect..

The hud for the game I haven't really though about it much but I will probably just go with a standard health bar, with a series of icons for quick access.

I want to try and use icons more than the text, its just a matter of me making the icons or finding the assets. But agreed it would be better if it were more visual. I haven't done the skill list/table yet but I want to do that in a visual way and not have to rely on long lists of text.
Tjakka5
Party member
Posts: 240
Joined: Thu Dec 26, 2013 12:17 pm

### Re: My projects and demos

Maybe this could help?

Check out my portfolio: http://tjakka5.sorunome.de/
Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: My projects and demos

Tjakka5 wrote:Maybe this could help?

Thanks, yes I think some of the icons could be useful doing the interfaces.

I did find a rather large icon pack for games but I am not so keen on the art style so I decided not to use it.

Today was a bit slow, partly because of my own stupidity in not following simple instructions (I spent a good hour trying to work out why I couldn't get the numbers to conform to a path, when in fact the guide I was looking at was just arranging them by eye.. and partly due to inkscape crashing and corrupting one of my save files.

But all was not lost.

Following on from the conversation last night about trying to find better ways to show the player stats. I thought how about a kind of gauge that would show the user when a statistic was going to be good for a character, average or poor. So I came up with a kind of reverse tack meter.

As always my inkscape fu is pretty weak and I think i might have an alignment error in a few of the frames but I'll fix that later once I know the interface is sound.

anyway here is what I have been working on today..
mtack1.png (32.7 KiB) Viewed 4842 times
mtack7.png (32.59 KiB) Viewed 4842 times
mtack10.png (32.39 KiB) Viewed 4842 times
There are 10 images in all, 1-10. So the player can see at a glance by the red/yellow/green how good/bad that particular stat is.

If the animation works ok, then I will do the 0.2 positions so I can make some nice transition effects. But no point in doing that if the interface will not work.

I want to see if a bar on a curve would show the information better rather than a needle so I will do that next. I figure none of this is wasted because there are bound to be times I could do with a gauge for something.
Last edited by Pangit on Fri Jul 01, 2016 10:51 am, edited 1 time in total.
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

### Re: My projects and demos

Pangit wrote: If the animation works ok, then I will do the 0.2 positions so I can make some nice transition effects.
Maybe you could just make two images, background/needle, then simply rotate the needle programmatically.
You could do the same for the colours, and show them progressively by adding alpha as the meter rises.
Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: My projects and demos

Ulydev wrote:
Maybe you could just make two images, background/needle, then simply rotate the needle programmatically.
You could do the same for the colours, and show them progressively by adding alpha as the meter rises.
I was thinking about that but I wanted to cut down on processing time as much as possible. The images are pretty small (33k). But granted it probably would look much better if the transition was done as a function. Will be an interesting thing to test.

this is the progress so far, as you can see I have not finished the characteristics plates yet, or a decent title for the character screen.
charactersheet_2.jpg (266.81 KiB) Viewed 4810 times
I plan to run a icon hotbar menu along the bottom.

heres the main.lua code from tonight - I commented out the original brutal hack just to get the layout done, disgusted by the code smell I had to attempt to fix that abomination. So while I could have made the love draw be less cluttered I think its ok for now.

Code: Select all

function love.load()
bg = love.graphics.newImage("/assets/tack/bg.jpg")
housing = love.graphics.newImage("/assets/tack/mhousing.png")
tack1 = love.graphics.newImage("/assets/tack/mtack1.png")
tack2 = love.graphics.newImage("/assets/tack/mtack2.png")
tack3 = love.graphics.newImage("/assets/tack/mtack3.png")
tack4 = love.graphics.newImage("/assets/tack/mtack4.png")
tack5 = love.graphics.newImage("/assets/tack/mtack5.png")
tack6 = love.graphics.newImage("/assets/tack/mtack6.png")
tack7 = love.graphics.newImage("/assets/tack/mtack7.png")
tack8 = love.graphics.newImage("/assets/tack/mtack8.png")
tack9 = love.graphics.newImage("/assets/tack/mtack9.png")
tack10 = love.graphics.newImage("/assets/tack/mtack10.png")
intplate = love.graphics.newImage("/assets/tack/intplate.png")
bodyplate = love.graphics.newImage("/assets/tack/bodyplate.png")
attractivenessplate = love.graphics.newImage("/assets/tack/attractivenessplate.png")
empathyplate = love.graphics.newImage("/assets/tack/empathyplate.png")
luckplate = love.graphics.newImage("/assets/tack/luckplate.png")
reflexesplate = love.graphics.newImage("/assets/tack/reflexesplate.png")
technologyplate = love.graphics.newImage("/assets/tack/technologyplate.png")

end

function tackdraw(statname, statval,xpos, ypos)
if statname =="intellegence" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval,xpos,ypos)
love.graphics.draw(intplate, xpos-55,ypos+315)
end

if statname =="body" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval,xpos,ypos)
love.graphics.draw(bodyplate, xpos-55,ypos+315)
end
if statname =="attractiveness" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval,xpos,ypos)
love.graphics.draw(attractivenessplate, xpos-55, ypos+315)
end
if statname =="empathy" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval, xpos,ypos)
love.graphics.draw(empathyplate, xpos-55,ypos+315)
end
if statname =="luck" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval, xpos,ypos)
love.graphics.draw(luckplate, xpos-55,ypos+315)
end
if statname =="technology" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval, xpos,ypos)
love.graphics.draw(technologyplate, xpos-55,ypos+315)

end
if statname =="reflexes" then
love.graphics.draw(housing, xpos-55, ypos-55 )
tackdrawval(statval, xpos,ypos)
love.graphics.draw(reflexesplate, xpos-55,ypos+315)
end

end

function tackdrawval(statval ,xpos, ypos)
if statval == 1 then
love.graphics.draw(tack1, xpos, ypos)
end
if statval == 2 then
love.graphics.draw(tack2, xpos,ypos)
end
if statval == 3 then
love.graphics.draw(tack3, xpos,ypos)
end
if statval == 4 then
love.graphics.draw(tack4, xpos,ypos)
end
if statval == 5 then
love.graphics.draw(tack5, xpos,ypos)
end
if statval == 6 then
love.graphics.draw(tack6, xpos,ypos)
end
if statval == 7 then
love.graphics.draw(tack7, xpos,ypos)
end
if statval == 8 then
love.graphics.draw(tack8, xpos,ypos)
end
if statval == 9 then
love.graphics.draw(tack9, xpos,ypos)
end
if statval == 10 then
love.graphics.draw(tack10, xpos,ypos)
end
end

function drawcharactersheet()
tackdraw("intellegence", 10, 155, 355)
tackdraw("body", 10, 505, 350)
tackdraw("attractiveness", 10, 855,350)
tackdraw("empathy", 10, 1205, 350)
tackdraw("luck", 10, 1555, 350)
tackdraw("technology", 10, 1905, 350)
tackdraw("reflexes", 10, 2255, 350)
tackdraw("intellegence", 10, 155, 855)
tackdraw("body", 10, 505, 855)
tackdraw("attractiveness", 10, 855, 855)
tackdraw("empathy", 10, 1205, 855)
tackdraw("luck", 10, 1555, 855)
tackdraw("technology", 10, 1905, 855)
tackdraw("reflexes", 10, 2255, 855)
end

function love.draw()
love.graphics.draw(bg, 0,0)
love.graphics.scale(0.5,0.5)
drawcharactersheet()

-- yes dear reader I really did this.. lol.

--love.graphics.draw(housing, 100,300)
--love.graphics.draw(housing, 450, 300)
--love.graphics.draw(housing, 800, 300)
--love.graphics.draw(housing, 1150, 300)
--love.graphics.draw(housing, 1500, 300)
--love.graphics.draw(housing, 1850, 300)
--love.graphics.draw(housing, 2200, 300)
--love.graphics.draw(tack1, 155, 355)
--love.graphics.draw(tack2, 505, 350)
--love.graphics.draw(tack3, 855, 350)
--love.graphics.draw(tack4, 1205, 350)
--love.graphics.draw(tack5, 1555, 350)
--love.graphics.draw(tack6, 1905, 350)
--love.graphics.draw(tack7, 2255, 350)
--love.graphics.draw(intplate, 100,670)
--love.graphics.draw(bodyplate, 450,670)
--love.graphics.draw(attractivenessplate, 800,670)
--love.graphics.draw(empathyplate, 1150,670)
--love.graphics.draw(luckplate, 1500,670)
--love.graphics.draw(technologyplate, 1850,670)
--love.graphics.draw(reflexesplate, 2200,670)
-- row two
--love.graphics.draw(housing, 100, 800)
--love.graphics.draw(housing, 450, 800)
--love.graphics.draw(housing, 800, 800)
--love.graphics.draw(housing, 1150, 800)
--love.graphics.draw(housing, 1500, 800)
--love.graphics.draw(housing, 1850, 800)
--love.graphics.draw(housing, 2200, 800)
--love.graphics.draw(tack8, 155, 855)
--love.graphics.draw(tack9, 505, 855)
--love.graphics.draw(tack10, 855, 855)
-- love.graphics.draw(tack1, 1205, 855)
--love.graphics.draw(tack2, 1555, 855)
--love.graphics.draw(tack3, 1905, 855)
--love.graphics.draw(tack4, 2255, 855)
--love.graphics.draw(intplate, 100,1170)
--love.graphics.draw(bodyplate, 450,1170)
--love.graphics.draw(attractivenessplate, 800,1170)
--love.graphics.draw(empathyplate, 1150,1170)
--love.graphics.draw(luckplate, 1500,1170)
--love.graphics.draw(technologyplate, 1850,1170)
--love.graphics.draw(reflexesplate, 2200,1170)
end

Last edited by Pangit on Fri Jul 01, 2016 3:26 pm, edited 1 time in total.
ivan
Party member
Posts: 1719
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

### Re: My projects and demos

Good job, Pangit, looks like a step in the right direction.
I would take out the text "Mekesoft" since it's being repeated 10 times.
You may try replacing "Mekesoft" with a numeric value, anything but repeating text.
It's fine if you want to have your logo but add it just once, somewhere in the corner.
Other than that, it looks ok.

It's a little hard to read the gauges on first glance.
So you may consider reworking that a little bit,
sometimes a simple solid ring is easier to see,
or perhaps some hint of color (where red means little and green means a lot).
Take care!
Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: My projects and demos

Hi Ivan, cheers - yea the logo is really just a place-holder. the plan is to replace it with any buff/de-buff to the characteristic I agree the font is kinda hard to read at this resolution I think a simple bold font will be ok. I will see if I can get the size of the dial numbers increased also as they are a bit on the small size - I think twice as large would be fine.

I am thinking to change the needle color to reflect what number its on (red for 1-4, yellow for 5-7 and green for 8 - 10) to help legibility.

The other thing I was thinking to add was a icon in the centre of the dial to help with identifying the statistic - will need to find some sorta visual representation for the characteristics. Will put it where the needle butt is now.
mr_happy
Citizen
Posts: 84
Joined: Fri Mar 18, 2016 8:57 pm

### Re: My projects and demos

I wouldn't like to play a game with so many dials (unless it was a flight sim lol). Also, the history of rpg's is littered with games with bad icons - things that the designer thought looked good/obvious but were impenetrable to the average player.

Why not just use some form of graduated bar and skip the numbers as Ivan first suggested (if you want to reduce the amount of text)? It's much easier to compare stats at a glance and takes up far less space. Some of the best RPGs have masses of text on the character sheets and even classic console titles aren't always light on text (think FFIII etc). I wouldn't be averse to your original screen-shot, it just needs a better layout (things like the stats all having three-letter abbreviations for example).

Anyway, I wouldn't get bogged down on the design of a particular screen - you have much bigger fish to fry

(Nitpick - intelligence is the spelling )

### Who is online

Users browsing this forum: No registered users and 20 guests