Heeeeey this is pretty dang neat!
Nice job!
If you want me to whip you up a fancy GUI let me know.
EDIT : GUI Details
Righty-o, Here are the details for the GUI.
Only had an hour free this afternoon so i focused on the GUI in which you have already implemented.
All files are available at the git repository, in
assets.zip
Since most of it is flat colours, you can reduce the need for sprite loading significantly by using the shapes drawing built into libVita2d.
specifically
vita2d_draw_rectangle(x, y, width, height, color);
I've changed the Discord title to 'VitaCord', if that is something you were after. If not, let me know and i'll switch back to 'Discord'.
Live Area:
[spoiler]
[/spoiler]
I see your app has a splash screen on boot. So i created a splash with the correct dimensions.
Splash:
[spoiler]
[/spoiler]
Login:
Same layout as the one you have now, i've just introduced the new title and provided some general clean up.
The whole login panel is still one image. You can either use vita2d to draw button press highlighting or i can split the login button from the login panel image, and provide a separate button press sprite.
The final panel image does not include the register text, i though if you were to add a text link ('Register') which opens the Vita Browser to the discord registration page, then that is where i would place this text link.
[spoiler]
[/spoiler]
drawn @ x161 y53
To save you the trouble, here are the Touch sampling areas for the login panel.
Code: Select all
emailI.x = 431;
emailI.y = 139;
emailI.w = 375;
emailI.h = 50;
passwordI.x = 431;
passwordI.y = 219;
passwordI.w = 375;
passwordI.h = 50;
loginI.x = 449;
loginI.y = 335;
loginI.w = 349;
loginI.h = 58;
I see you're drawing a 960x544 flat colour background image. you could ditch this background image and just draw a rectangle.
Code: Select all
if (state == 0) {
vita2d_draw_rectangle(0, 0, 960, 544, RGBA8(114, 137, 217, 255));
vita2d_draw_texture(loginFormImage, 161, 53);
vita2d_font_draw_text(vita2dFont, 438, 181, RGBA8(255, 255, 255, 255), 18, loginTexts[0].c_str());
vita2d_font_draw_text(vita2dFont, 438, 261, RGBA8(255, 255, 255, 255), 18, loginTexts[1].c_str());
}
[spoiler]
[/spoiler]
The origins and colours are as follows
status Bar.
Code: Select all
vita2d_draw_rectangle(0, 0, 960, 30, RGBA8(242, 101, 34, 163));
vita2d_draw_texture(statbarIconImage, 10, 7); // statbarIconImage = Vitacord-statbar-icon.png
Code: Select all
vita2d_draw_rectangle(0, 30, 230, 449, RGBA8(46, 49, 54, 255));
vita2d_draw_rectangle(0, 479, 230, 1, RGBA8(5, 5, 6, 255));
vita2d_draw_rectangle(0, 480, 230, 64, RGBA8(40, 43, 48, 255));
vita2d_draw_texture(sidepanelStateIconImage, 14, 493); // sidepanelStateIconImage = user icon or Vitacord-default-usericon.png
vita2d_font_draw_text(vita2dFont18, 70, 514, RGBA8(255, 255, 255, 255), 18, "Username");
vita2d_font_draw_text(vita2dFont15, 70, 530, RGBA8(255, 255, 255, 255), 15, "User ID"); // create a vita2dfont for each font-size or your font will get messed up.
Code: Select all
vita2d_draw_rectangle(230, 30, 730, 514, RGBA8(54, 57, 62, 255)); // Background
unsigned int i, yPos, height, spacing;
for (i = 0; i < messageBoxes.size(); i++) {
yPos = channelScrollY + (i * 128);
if (yPos < MAX_DRAW_HEIGHT && yPos > MIN_DRAW_HEIGHT) {
/*
To handle message height, i would have a default height, and calculate
the hight required for each message. Then set either the default height
or the calculated height, whichever is greater.
You can do this quite efficiently if your word-wrap function returns
the total line breaks made to the target message.
Since there's no need to incorperate scaling for different display resolutions,
your calculation can be as basic as:
int lineCount = wordWrap(stringToStoreWrappedText, messageTextToWrap, maxTextWidth); // returns line count
int topMargin = 45;
int bottomMargin = 18;
int textHeight = lineCount * vita2d_font_text_height(MessageFont, MessageFontSize, "H");
messageBoxes[i].messageHeight = max(64, lineHeight + topMargin + bottomMargin); // default height is 64
Of course do this calculation to each message once as it's sent/recieved and store it.
then access it from messageBoxes[i].messageHeight
I can provide you a word-wrap function which returns a line count.
*/
height = messageBoxes[i].messageHeight;
vita2d_draw_rectangle(240, yPos + height, 710, 2, RGBA8(62, 65, 70, 255)); // two small lines to outline the message panel
vita2d_draw_rectangle(240, yPos + height, 710, 1, RGBA8(51, 53, 55, 255)); // no need for a panel image
vita2d_font_draw_text(vita2dFont15, 283, yPos + 26, RGBA8(255, 255, 255, 255), 15, messageBoxes[i].username.c_str());
vita2d_font_draw_text(vita2dFont15, 293, yPos + 50, RGBA8(255, 255, 255, 255), 15, messageBoxes[i].content.c_str());
// user avitar when added. will require scaling 32x32
//float scale = 32.0f / avitarWidth;
//vita2d_draw_texture_scale(messageBoxes[i].avitar, 243, yPos + 16, scale, scale);
yPos += spacing;
}
}
vita2d_draw_texture(messageInputImage, 230, 473); // messageInputImage = Vitacord-messager-input.png
Message input Touch sampling area.
x - 288
y - 475
width - 660
height - 44
I can draw up some dialog GUI if you'd like, but the Vita native dialogs look very similar in colour, so you may as well use native dialogs from the sdk.
Advertising
