Please coders help, how do I use a custom font on this thing?
http://rpg.pwntendo.com
The "Final Fantasy 6" font has no special characters which I need. How do I use a custom font? It should be easy for anyone in here that knows how to code to figure it out.
I have tried downloading the page to try to modify it online but doesn't work when I open the html, the blue box for the text doesn't show up and the font is missing.
I just want to make dialog boxes in final fantasy style for an animation and this box would make me go way faster since I just need to add character name and text and "save as image". With paint I ned to align the text etc each time.
>>51911753
>try to modify it online
I meant offline
>>51911753
install gentoo
then read the sticky.
>>51911760
i am posting this from gentoo
please coders it should be fairly easy to do for you
>>51911753
Download page. Download *.js and *.css. Modify it. It's literally that easy if you get the paths right.
>>51911842
How to properly download the page? I tried "save as" but when I open the html in my hard disk, what I see is a mess, its only the text, with an incorrect form, and the blue box image is missing, and the actual final fantasy text doesnt show up when I write.
>>51911888
This is what I see.
I assume that this happens because the code contains the url for the image file for the blue box and also the custom font.
So I just need to change those urls to the location my hard disk? for example in the image
"C:/images/textbog.png"
and the font for the .ttf file? I will try.
>>51911955
I will give you a hint.
https://github.com/TheJF/RPGTextboxGen/blob/master/styles/fonts.less
>>51912027
Ah you found it on github
Well Im trying to change the urls to local files in this case the already included final fantasy 6 fonts but im doing something wrong in the sintax... how do I properly point to a folder?
"url" is only for online or do I just add the folder path inside the ' ' for example I change
src: url('../fonts/FF6/final_fantasy_vi_snesb-webfont.eot');
to
src: url('C:/downloads/RPGTextboxGen-master\fonts\FF6final_fantasy_vi_snesb-webfont.eot');
because it doesnt work and i tried that
>>51912521
Where do you keep your html?
If it's in C:/downloads/RPGTextboxGen-master\
Then you can use:
src: url('./fonts/FF6/final_fantasy_vi_snesb-webfont.eot');
the "./" in beginning refers to "current folder", the "../" in the original code refers to "one folder up and then..:". I imagine that would work, I havent coded in javascript before.
>>51912657
Don't use the full path then, only use relative path like in the original code.
>>51912562
yes
that's the default so it should work as you download it excepet it doesn't...
also the bg image doesnt load, which is located at
bg.src = 'images/ff6_bg.png';
(line 89 in rpg-textbox-gen-0.1.js)
everything should load by default then but it doesnt
>>51912675
Yes i deleted the message because i realize full path doesnt work, but, as you realize it should work by default but nothing loads.. what is going on ? strange.
>>51911778
Screenshot.
>>51912675
Maybe its something to do in the index.html code? there are urls in here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
RPG Text Box Generator
</title>
<!-- Styleland -->
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet/less" type="text/css" href="styles/style.less">
<!-- /Styleland -->
<!-- Scriptland -->
<!-- [if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/less-1.3.0.min.js" type="text/javascript"></script>
<script src="scripts/rpg-textbox-gen-0.1.js" type="text/javascript"></script>
<!-- /Scriptland -->
</head>
<body>
<h1>RPG Text Box Generator</h1>
<canvas id="textbox" width="1135" height="340"></canvas>
<div id="content">
<p>
The RPG Text Box Generator is an HTML5 app that converts
what you type into a RPG-style text box. To try it out,
choose a style and type in some text below!
</p>
<form>
<table>
<tr>
<td>
<label for="rpgStyle">Type:</label>
</td>
<td>
<select id="rpgStyle" name="rpgStyle">
<option value="ff6">Final Fantasy 6 Basic</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="characterName">Character Name:</label>
</td>
<td>
<input type="text" id="characterName" name="characterName"></input>
</td>
</tr>
<tr>
<td>
<label for="dialogText">Dialog Text:</label>
</td>
<td>
<textarea id="dialogText" name="dialogText"></textarea><br />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
this actually quite upsets me, i cant find a way!
any javascripters in here? why are the things not loading?
please heeelp
>>51914923
I downloaded the font and the bg image, and then edited the javascript and html files to use local file references instead of requesting files from the website
https://www.dropbox.com/sh/ixlyjrt2p6geptn/AAChJs4cPtTmmblyXXroxxZEa?dl=0
>>51915025
>https://www.dropbox.com/sh/ixlyjrt2p6geptn/AAChJs4cPtTmmblyXXroxxZEa?dl=0
thanks
where do you reference final_fantasy_vi_snesb-webfont.woff tho?
also why did you delete the other font files? why woff and not the tlf files which are font files?
>>51915083
ok i see its referenced in the html file
i still don't understand why you use the woff file, why are the other fiels not necessary?
if I want to use a custom file that is a tlf file, do I just replace the .woff file with the .tlf file I watn to use in the html and it will work?
>>51911753
This guy is sick* or These guys are sick*.
>>51915151
I just downloaded the .woff because I was looking at the resources/fonts, and that's the only one that showed up in the html inspector. So I replaced that one in the html and that seemed to work.
For a custom font, you would probably replace the one in the html, plus change a line in the javascript filecontext.font = "116px FinalFantasyVISNESbRegular"
By the way, I don't really know what I'm doing. I've never really used much javascript before, so I'm just trying things to see what will work.
>>51915233
I ended up testing it out with a different font, and it sort of works (don't even need to change the javascript). The only thing is, the spacing is fucked up
>>51915355
its unfortunate that i am not english speaker because otherwise this would be perfect as it is but the font used by default doesnt make special characters
>>51915395
If you just put your font file in the folder, and then rename the font file in the @font-face part of the html header, it should work.
If it's too big or the spacing is fucked up, open the js file and edit the 116px to a different number
>>51915501
ko will try