Skip to content

Commit bf0e87a

Browse files
4as4as
committed
Uploaded the complete project.
1 parent b128abd commit bf0e87a

22 files changed

+79550
-2
lines changed

‎.vscode/launch.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": "Launch Chrome",
9+
"request": "launch",
10+
"type": "chrome",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
},
14+
{
15+
"name": "HashLink (launch)",
16+
"request": "launch",
17+
"type": "hl",
18+
"cwd": "${workspaceFolder}",
19+
"preLaunchTask": {
20+
"type": "haxe",
21+
"args": "active configuration"
22+
}
23+
},
24+
{
25+
"name": "HashLink (attach)",
26+
"request": "attach",
27+
"port": 6112,
28+
"type": "hl",
29+
"cwd": "${workspaceFolder}",
30+
"preLaunchTask": {
31+
"type": "haxe",
32+
"args": "active configuration"
33+
}
34+
}
35+
]
36+
}

‎README.md

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,35 @@
1-
# heaps-msdf-text
2-
Simple extension of the Heaps' Text class to support outlines using multi-channel SDF.
1+
# Introduction
2+
Simple extension of the Heaps' Text class that supports outlines using multi-channel SDF. Should work as a drop-in replacement for any Text instance you're using. Tested in HashLink, Flash, and HTML5.
3+
4+
# Usage
5+
##### 1. Creating an SDF texture
6+
Rendering a font with SDF for Heaps can be a little tricky since not only you need it to be compatible with the shading logic I'm using, you also need to export it in a proper format. Of all the tools I've tried [msdf-gdx-gen](https://github.com/maltaisn/msdf-gdx-gen) gave the best results, however it requires Java to run.
7+
Here's an example of a command you can use to create a compatible font:
8+
`java -jar msdfgen.jar -t msdf -a sdf -s 64 -r 22 -c latin-9 yourfont.ttf -p 2 -d 2048 2048`
9+
10+
##### 2. Instantiating the MSDF font in your application
11+
Once you have your *.fnt* and *.png* files exported, put them somewhere in your project's folder, and then instantiate the related Font object using the `toSdfFont` method.
12+
`var fnt:Font = Res.yourfont.toSdfFont(48, SDFChannel.MultiChannel);`
13+
Note: Non-multichannel fonts are also supported, but you need to export them using a different set of *msdfgen.jar* export options.
14+
15+
##### 3. Create an OutlinedText object and configure it to display the outlines
16+
Download all the classes located in the *src* folder and place them in your project's source folder.
17+
Finally you can create the `OutlinedText` object and pass into it the previously instantiated Font:
18+
`var txt:OutlinedText = new OutlinedText( fnt );`
19+
By default `OutlinedText` does not display any outlines, so you need to enable them by setting the `outline` property to `true`. Now only thing left to do is to mess around with `OutlinedText`'s properties to create the desired look.
20+
21+
*Thickness* controls the cut off point for the font rendering. It's the same value as `alphaCutoff` passed to the `toSdfFont` method.
22+
![Thickness example!](/docs/thickness.png)
23+
24+
*Smoothness* controls the blur on the edges of the rendered font. It's the same value as `smoothing` passed to the `toSdfFont` method.
25+
![Smoothness example!](/docs/smoothness.png)
26+
27+
*Outline thickness* controls the cut off point for the outlines. The outlines will be rendered in between this value and the *thickness* value.
28+
![Outline thickness example!](/docs/outlineThickness.png)
29+
30+
*Outline smoothness* controls the blur on the edges of the rendered outlines.
31+
![Outline smoothness example!](/docs/outlineSmoothness.png)
32+
33+
##### 4. Miscellaneous stuff
34+
Setting the `font` property will instantly reset all outline properties on the `OutlinedText` object. This allows `OutlinedText` to directly replace any `Text` without (hopefully) any changes.
35+
If you want to see some examples on how to use `OutlinedText` check out the *src-example* folder.

‎bin/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
7+
<meta name="format-detection" content="telephone=no" />
8+
<meta name="apple-mobile-web-app-capable" content="yes" />
9+
<meta name="mobile-web-app-capable" content="yes" />
10+
<style>
11+
body,html { margin:0; padding:0; background-color:black; width:100%; height:100%; }
12+
canvas#webgl { width:100%; height:100%; }
13+
</style>
14+
</head>
15+
<body>
16+
<canvas id="webgl"></canvas>
17+
<script src="main.js"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)