Advertising (This ad goes away for registered users. You can Login or Register)

VitaCord - A Discord Client for Vita

HENkaku is a native Homebrew Enabler for the PS Vita and PS TV. It lets you run homebrews on the PS Vita
JhonDoeA
Posts: 18
Joined: Fri May 12, 2017 9:17 am

VitaCord - A Discord Client for Vita

Post by JhonDoeA » Thu Jun 01, 2017 11:26 am

Hello everyone, vitacord is a client for a popular chat application!
You can use it easily, and chat with your guild or dm.
I hope to get more features.

Image
Image
Image
Image


Releases :
https://github.com/devingDev/VitaCord/releases
Current version [dev] : :
https://github.com/devingDev/VitaCord/r ... a_cord.vpk

Features :
  • DM screen to view and send
    Supports 2FA login
    Select guild / channel
    Read channel messages ( last 50 only! )
    Send messages to channels!
Credits for helping me: Arkanite , XandridFire , SKGleba. Rinnegatamante , xyz , noname120 , davee , T3CHNOLOG1C and more if I remember :>

Last changes 1.5 :
New Discord themed UI with psvita info on statusbar
Stability improved

Current dev version :
Shows thumbnails of images.
Downloads attachments like text which are under 1mb automatically.
More stable.
Faster scrolling.
Warning: Deleting messages might crash your vita . This needs to be fixed
Advertising
Last edited by JhonDoeA on Fri Jun 16, 2017 4:19 pm, edited 14 times in total.

Arkanite
Posts: 22
Joined: Fri Aug 19, 2016 3:21 am

Re: VitaCord - A Discord Client for Vita

Post by Arkanite » Thu Jun 01, 2017 2:58 pm

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]Image[/spoiler]

I see your app has a splash screen on boot. So i created a splash with the correct dimensions.
Splash:
[spoiler]Image[/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]Image[/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());
	}


Main screen:
[spoiler]Image[/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
Side Panel.

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.
Conversation Panels.

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
Last edited by Arkanite on Wed Jun 07, 2017 12:13 pm, edited 8 times in total.

JhonDoeA
Posts: 18
Joined: Fri May 12, 2017 9:17 am

Re: VitaCord - A Discord Client for Vita

Post by JhonDoeA » Thu Jun 01, 2017 3:58 pm

Arkanite wrote:Heeeeey this is pretty dang neat!
Nice job!

If you want me to whip you up a fancy GUI let me know.
Thanks man aprreciate it.
Btw your stores GUI looks beautiful. I would like to bring in your fantastic work into this homebrew.

PS : I am not experienced with designing GUI on vitas so maybe you can teach me a thing or two.

Arkanite
Posts: 22
Joined: Fri Aug 19, 2016 3:21 am

Re: VitaCord - A Discord Client for Vita

Post by Arkanite » Fri Jun 02, 2017 2:35 am

no worries at all. :)
Will see what i can come up with when i get home.

Arkanite
Posts: 22
Joined: Fri Aug 19, 2016 3:21 am

Re: VitaCord - A Discord Client for Vita

Post by Arkanite » Fri Jun 02, 2017 8:31 am

Here you go. Simple Gui but less is always more.

Image

Arkanite
Posts: 22
Joined: Fri Aug 19, 2016 3:21 am

Re: VitaCord - A Discord Client for Vita

Post by Arkanite » Fri Jun 02, 2017 8:44 am

Just messing with ya. ;)


Discord colours are very clean and flat, so i kept it the same.

Icon (if needed)
Image


Still working on the live area, but was thinking of something along the lines of:
Image

Interface is Discord's 'shade' colours. you can introduce the side panel menu if you want to provide settings that users can tinker with, otherwise it's really not needed.
I'll continue to work on it and add more layouts that you can pick and choose from to find something you like.
There's a lot of features here, i wasn't sure which discord feature you will be implementing in the future so i'll just create all features, and you can use what you like then. doesn't take very long anyhow.

Adding friends.
Image

Conversation layout.
Image

GUI can be implemented quite easily. It's animations and fades which take quite a bit of time.
I would recommend libVita2d of course, they have really done a fantastic job with that library and it will save you a lot of time.
If you need a hand with coding GUI i can lend a hand.

EDIT:
Of course these are just screenshots. i will provide you with the full layered PSD files and pre optimized PNG files for vita.

JhonDoeA
Posts: 18
Joined: Fri May 12, 2017 9:17 am

Re: VitaCord - A Discord Client for Vita

Post by JhonDoeA » Fri Jun 02, 2017 3:12 pm

Okay first of all these look very well done!

Secondly I would like to know if you can give some tips in how to structure / lay out the code for UI so it does not get repetitive or something like that.

PS: where do i find pgf comic sans

Arkanite
Posts: 22
Joined: Fri Aug 19, 2016 3:21 am

Re: VitaCord - A Discord Client for Vita

Post by Arkanite » Fri Jun 02, 2017 4:29 pm

A light theme would be easy enough. I just went with the original Discorse theme.

I only have two released apps for Vita which are in Beta (so no stable open source code yet), but i can send you the source code anyhow if you would like, as an example of implementing a GUI.
Or i could create a sample project with sufficient commenting on the subject.
Might be easier than going through a large project that hasn't been code-cleaned.
Ether way is fine, all my Vita work is open for viewing, or pointing and laughing at, so let me know what you need.

If you would like me to write the Gui, you'll need to give access to username 'ArkSourse' on Github.

JhonDoeA
Posts: 18
Joined: Fri May 12, 2017 9:17 am

Re: VitaCord - A Discord Client for Vita

Post by JhonDoeA » Fri Jun 02, 2017 4:37 pm

I added you to the proejct on github.

If you want to add things feel free. I will try making the code look better , so yo guys can read it without getting headaches .

Well if it is ok I would like to see some example but if you don't have time just let it be. I will probably figure something out.

JhonDoeA
Posts: 18
Joined: Fri May 12, 2017 9:17 am

Re: VitaCord - A Discord Client for Vita

Post by JhonDoeA » Fri Jun 02, 2017 4:41 pm

Also if you want I'll handle the code myself no need to do more than needed, I just asked for some advice on it :)

Are you using irc or discord ?
Last edited by JhonDoeA on Fri Jun 02, 2017 4:49 pm, edited 1 time in total.

Post Reply

Return to “HENkaku”