Pretzel Heart
Afterimage of Broad Daylight
Yo yo yo!
This is a BBC version of the 'Mystic Messenger' app to be used in an RP.
Since there was so much, I decided to use a thread to share it, hope that's ok ;;
However, that means that anyone is free to use this for whatever and suggest edits. ^ ^ I am an amateur who basically derp de diddly derps with tutorials until I get something that...works?, so I am sure there are others who can find far more elegant solutions. Even if I did put my heart and soul into this project. ; e; Credit where due though I got some inspiration (like using carrots) from the brilliant minds of the BBC contest which I was gonna link but can't find :'''), as well as the amazing site W3Schools. I also looked at the layout of real messenger apps and spent a lot of time trolling Google.
This started out as a challenge / personal project so...I'm not really sure how useful it is for RPing. ;; But I had fun working on it and learning more about BBC so yol0
Below is the code for 6 different chatroom versions with all the BGs that can be found in the game I think I got them all. I tried to be as accurate as possible while making some changes to be more believable as an actual app rather than a VN. I will be providing layouts for MC and 707, but it shouldn't be too difficult to switch things around in case anyone ever looks at this thread. xD
I did try and make it as user-friendly as possible, so you should be able to do everything in the what-you-see-is-what-you-get editor without too much headache. Just copy-paste the section of code relating to the type of bubble you want to use and edit the text. :3 Doing this has never broken the BBC for me...so far. The spacing works best when there is a blank "enter space" between each bubble.
Notes:
This model should be fully legible on all screen sizes
The fonts used in the game mostly fall under the umbrella of "Nanum," which is used to render Korean characters (go figure). While these fonts are in the "Early Access" section of Google Fonts, hinting that they may be available for our purposes one day, for now I used copycats
= Nanum Gothic -> Default RPN Font
= Nanum Myeongjo -> Book Antiqua
= Times New Roman -> Book Antiqua (Bold)
= BM Hanna -> Boogaloo
= Unknown handwritten font -> Indie Flower
Chat Icons are 50px x 50px if you want to replace them. For the app user (right side / MC) for some reason the spacing might get a bit edgy in which case please use 45px x 45px instead. I included the ones I personally felt were most logical for the character as well as the defaults to start.
If you want to "send a photo" just delete all the code under the username and replace with an image. I used the 150px x 112px sizing option and that seemed to work pretty well.
If you want to use the Mystic Messenger emojis, I would suggest finding ones with transparent backgrounds and using Height Restrict=150. Also there is a spacing issue so if you want to avoid a large gap after the emoji just delete any space between the div and the follow chat bubble (see example). I was having trouble finding them so I ended up rendering some myself but I did so very lazily...please share if you find a better source lol
This code should include solutions for all weird chat variations (If I missed one please tell me) except any that involve custom chat bubbles, since I thought their implementation would be something like "more trouble than it's worth for an RP." If anyone less lazy builds a version with these, please share. xD
Also...after I had already finished this project.......I found this great resource for those who love life and don't like pain xD
It only lets you capture images, however, so it might be a bit more limited
This model should be fully legible on all screen sizesThe fonts used in the game mostly fall under the umbrella of "Nanum," which is used to render Korean characters (go figure). While these fonts are in the "Early Access" section of Google Fonts, hinting that they may be available for our purposes one day, for now I used copycats= Nanum Gothic -> Default RPN Font
= Nanum Myeongjo -> Book Antiqua
= Times New Roman -> Book Antiqua (Bold)
= BM Hanna -> Boogaloo
= Unknown handwritten font -> Indie Flower
Chat Icons are 50px x 50px if you want to replace them. For the app user (right side / MC) for some reason the spacing might get a bit edgy in which case please use 45px x 45px instead. I included the ones I personally felt were most logical for the character as well as the defaults to start.If you want to "send a photo" just delete all the code under the username and replace with an image. I used the 150px x 112px sizing option and that seemed to work pretty well.If you want to use the Mystic Messenger emojis, I would suggest finding ones with transparent backgrounds and using Height Restrict=150. Also there is a spacing issue so if you want to avoid a large gap after the emoji just delete any space between the div and the follow chat bubble (see example). I was having trouble finding them so I ended up rendering some myself but I did so very lazily...please share if you find a better source lolThis code should include solutions for all weird chat variations (If I missed one please tell me) except any that involve custom chat bubbles, since I thought their implementation would be something like "more trouble than it's worth for an RP." If anyone less lazy builds a version with these, please share. xDAlso...after I had already finished this project.......I found this great resource for those who love life and don't like pain xD
It only lets you capture images, however, so it might be a bit more limited
Last edited:
