Working on web examples
Reorganizing folders Review examples Work on makefile and loader.html
This commit is contained in:
Ray
parent
8374460c39
commit
f7bebf9861
421 changed files with 103013 additions and 524979 deletions
BIN
docs/examples/web/text/resources/KAISG.ttf
Normal file
BIN
docs/examples/web/text/resources/KAISG.ttf
Normal file
Binary file not shown.
99
docs/examples/web/text/resources/bmfont.fnt
Normal file
99
docs/examples/web/text/resources/bmfont.fnt
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
info face="Arial Black" size=-32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2 outline=0
|
||||
common lineHeight=45 base=35 scaleW=512 scaleH=256 pages=1 packed=0 alphaChnl=0 redChnl=4 greenChnl=4 blueChnl=4
|
||||
page id=0 file="bmfont.png"
|
||||
chars count=95
|
||||
char id=32 x=423 y=141 width=3 height=45 xoffset=-1 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=33 x=323 y=141 width=9 height=45 xoffset=1 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=34 x=123 y=141 width=16 height=45 xoffset=0 yoffset=0 xadvance=16 page=0 chnl=15
|
||||
char id=35 x=221 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=36 x=244 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=37 x=70 y=0 width=30 height=45 xoffset=1 yoffset=0 xadvance=32 page=0 chnl=15
|
||||
char id=38 x=390 y=0 width=25 height=45 xoffset=2 yoffset=0 xadvance=28 page=0 chnl=15
|
||||
char id=39 x=378 y=141 width=8 height=45 xoffset=1 yoffset=0 xadvance=9 page=0 chnl=15
|
||||
char id=40 x=222 y=141 width=11 height=45 xoffset=1 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=41 x=499 y=94 width=11 height=45 xoffset=1 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=42 x=497 y=47 width=13 height=45 xoffset=2 yoffset=0 xadvance=18 page=0 chnl=15
|
||||
char id=43 x=394 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=44 x=367 y=141 width=9 height=45 xoffset=1 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=45 x=261 y=141 width=11 height=45 xoffset=0 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=46 x=356 y=141 width=9 height=45 xoffset=1 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=47 x=248 y=141 width=11 height=45 xoffset=-1 yoffset=0 xadvance=9 page=0 chnl=15
|
||||
char id=48 x=382 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=49 x=496 y=0 width=14 height=45 xoffset=2 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=50 x=134 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=51 x=359 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=52 x=313 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=53 x=336 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=54 x=178 y=94 width=20 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=55 x=478 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=56 x=290 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=57 x=90 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=58 x=345 y=141 width=9 height=45 xoffset=1 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=59 x=334 y=141 width=9 height=45 xoffset=1 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=60 x=0 y=141 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=61 x=21 y=141 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=62 x=310 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=63 x=352 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=20 page=0 chnl=15
|
||||
char id=64 x=279 y=0 width=26 height=45 xoffset=-1 yoffset=0 xadvance=24 page=0 chnl=15
|
||||
char id=65 x=193 y=0 width=27 height=45 xoffset=-1 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=66 x=150 y=47 width=22 height=45 xoffset=2 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=67 x=444 y=0 width=24 height=45 xoffset=1 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=68 x=174 y=47 width=22 height=45 xoffset=2 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=69 x=156 y=94 width=20 height=45 xoffset=2 yoffset=0 xadvance=23 page=0 chnl=15
|
||||
char id=70 x=63 y=141 width=18 height=45 xoffset=2 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=71 x=417 y=0 width=25 height=45 xoffset=1 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=72 x=125 y=47 width=23 height=45 xoffset=2 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=73 x=388 y=141 width=8 height=45 xoffset=2 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=74 x=200 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=75 x=251 y=0 width=26 height=45 xoffset=2 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=76 x=373 y=94 width=19 height=45 xoffset=2 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=77 x=134 y=0 width=28 height=45 xoffset=1 yoffset=0 xadvance=30 page=0 chnl=15
|
||||
char id=78 x=100 y=47 width=23 height=45 xoffset=2 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=79 x=363 y=0 width=25 height=45 xoffset=1 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=80 x=112 y=94 width=20 height=45 xoffset=2 yoffset=0 xadvance=23 page=0 chnl=15
|
||||
char id=81 x=335 y=0 width=26 height=45 xoffset=1 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=82 x=470 y=0 width=24 height=45 xoffset=2 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=83 x=75 y=47 width=23 height=45 xoffset=0 yoffset=0 xadvance=23 page=0 chnl=15
|
||||
char id=84 x=50 y=47 width=23 height=45 xoffset=0 yoffset=0 xadvance=23 page=0 chnl=15
|
||||
char id=85 x=25 y=47 width=23 height=45 xoffset=2 yoffset=0 xadvance=27 page=0 chnl=15
|
||||
char id=86 x=307 y=0 width=26 height=45 xoffset=0 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=87 x=0 y=0 width=34 height=45 xoffset=-1 yoffset=0 xadvance=32 page=0 chnl=15
|
||||
char id=88 x=222 y=0 width=27 height=45 xoffset=-1 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=89 x=164 y=0 width=27 height=45 xoffset=-1 yoffset=0 xadvance=25 page=0 chnl=15
|
||||
char id=90 x=0 y=47 width=23 height=45 xoffset=0 yoffset=0 xadvance=23 page=0 chnl=15
|
||||
char id=91 x=274 y=141 width=11 height=45 xoffset=1 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=92 x=300 y=141 width=10 height=45 xoffset=-1 yoffset=0 xadvance=9 page=0 chnl=15
|
||||
char id=93 x=287 y=141 width=11 height=45 xoffset=0 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=94 x=457 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=95 x=103 y=141 width=18 height=45 xoffset=-1 yoffset=0 xadvance=16 page=0 chnl=15
|
||||
char id=96 x=312 y=141 width=9 height=45 xoffset=0 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=97 x=474 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=98 x=68 y=94 width=20 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=99 x=267 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=100 x=46 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=101 x=198 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=102 x=141 y=141 width=15 height=45 xoffset=-1 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=103 x=222 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=104 x=415 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=105 x=398 y=141 width=7 height=45 xoffset=2 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=106 x=235 y=141 width=11 height=45 xoffset=-2 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=107 x=405 y=47 width=21 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=108 x=407 y=141 width=7 height=45 xoffset=2 yoffset=0 xadvance=11 page=0 chnl=15
|
||||
char id=109 x=102 y=0 width=30 height=45 xoffset=1 yoffset=0 xadvance=32 page=0 chnl=15
|
||||
char id=110 x=331 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=111 x=428 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=112 x=266 y=94 width=20 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=113 x=288 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=114 x=158 y=141 width=15 height=45 xoffset=1 yoffset=0 xadvance=14 page=0 chnl=15
|
||||
char id=115 x=244 y=94 width=20 height=45 xoffset=0 yoffset=0 xadvance=20 page=0 chnl=15
|
||||
char id=116 x=175 y=141 width=14 height=45 xoffset=0 yoffset=0 xadvance=14 page=0 chnl=15
|
||||
char id=117 x=436 y=94 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=118 x=451 y=47 width=21 height=45 xoffset=0 yoffset=0 xadvance=20 page=0 chnl=15
|
||||
char id=119 x=36 y=0 width=32 height=45 xoffset=-1 yoffset=0 xadvance=30 page=0 chnl=15
|
||||
char id=120 x=0 y=94 width=21 height=45 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
char id=121 x=23 y=94 width=21 height=45 xoffset=0 yoffset=0 xadvance=20 page=0 chnl=15
|
||||
char id=122 x=83 y=141 width=18 height=45 xoffset=0 yoffset=0 xadvance=18 page=0 chnl=15
|
||||
char id=123 x=191 y=141 width=14 height=45 xoffset=-1 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=124 x=416 y=141 width=5 height=45 xoffset=2 yoffset=0 xadvance=9 page=0 chnl=15
|
||||
char id=125 x=207 y=141 width=13 height=45 xoffset=0 yoffset=0 xadvance=12 page=0 chnl=15
|
||||
char id=126 x=42 y=141 width=19 height=45 xoffset=1 yoffset=0 xadvance=21 page=0 chnl=15
|
||||
BIN
docs/examples/web/text/resources/bmfont.png
Normal file
BIN
docs/examples/web/text/resources/bmfont.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/examples/web/text/resources/custom_alagard.png
Normal file
BIN
docs/examples/web/text/resources/custom_alagard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
docs/examples/web/text/resources/custom_jupiter_crash.png
Normal file
BIN
docs/examples/web/text/resources/custom_jupiter_crash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/examples/web/text/resources/custom_mecha.png
Normal file
BIN
docs/examples/web/text/resources/custom_mecha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/examples/web/text/resources/fonts/alagard.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/alagard.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/fonts/alpha_beta.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/alpha_beta.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/fonts/jupiter_crash.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/jupiter_crash.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/fonts/mecha.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/mecha.rbmf
Normal file
Binary file not shown.
188
docs/examples/web/text/resources/fonts/pixantiqua.fnt
Normal file
188
docs/examples/web/text/resources/fonts/pixantiqua.fnt
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
info face="PixAntiqua" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=2,2,2,2 spacing=2,2 outline=0
|
||||
common lineHeight=32 base=27 scaleW=512 scaleH=512 pages=1 packed=0 alphaChnl=0 redChnl=4 greenChnl=4 blueChnl=4
|
||||
page id=0 file="pixantiqua_0.png"
|
||||
chars count=184
|
||||
char id=32 x=9 y=304 width=7 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=33 x=391 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=34 x=240 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=35 x=468 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=36 x=152 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=37 x=176 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=38 x=303 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=39 x=495 y=266 width=8 height=36 xoffset=-3 yoffset=-2 xadvance=5 page=0 chnl=15
|
||||
char id=40 x=256 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=199 x=432 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=200 x=126 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=201 x=147 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=202 x=288 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=203 x=189 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=204 x=468 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=205 x=486 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=206 x=0 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=207 x=72 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=208 x=329 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=209 x=277 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=210 x=182 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=211 x=26 y=76 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=41 x=272 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=42 x=288 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=43 x=414 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=44 x=378 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=45 x=414 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=46 x=443 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=47 x=392 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=48 x=485 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=49 x=450 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=50 x=21 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=51 x=42 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=59 x=456 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=60 x=168 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=61 x=309 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=62 x=336 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=63 x=315 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=64 x=364 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=65 x=390 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=66 x=120 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=67 x=144 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=68 x=168 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=69 x=294 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=52 x=488 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=53 x=63 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=54 x=24 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=55 x=48 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=56 x=72 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=57 x=96 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=58 x=404 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=70 x=252 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=71 x=192 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=72 x=78 y=76 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=78 x=78 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=79 x=355 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=80 x=264 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=81 x=381 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=82 x=288 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=83 x=312 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=91 x=144 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=92 x=108 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=93 x=304 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=94 x=34 y=0 width=32 height=36 xoffset=-3 yoffset=-2 xadvance=29 page=0 chnl=15
|
||||
char id=95 x=231 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=96 x=442 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=97 x=408 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=98 x=432 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=99 x=210 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=84 x=336 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=85 x=360 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=86 x=0 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=87 x=68 y=0 width=30 height=36 xoffset=-3 yoffset=-2 xadvance=27 page=0 chnl=15
|
||||
char id=88 x=26 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=89 x=384 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=90 x=84 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=100 x=456 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=101 x=480 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=102 x=54 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=103 x=0 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=104 x=24 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=105 x=469 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=106 x=18 y=266 width=16 height=36 xoffset=-8 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=107 x=48 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=108 x=417 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=109 x=161 y=0 width=27 height=36 xoffset=-3 yoffset=-2 xadvance=24 page=0 chnl=15
|
||||
char id=110 x=72 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=111 x=96 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=117 x=192 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=118 x=216 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=119 x=248 y=0 width=27 height=36 xoffset=-3 yoffset=-2 xadvance=24 page=0 chnl=15
|
||||
char id=120 x=240 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=121 x=264 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=122 x=288 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=123 x=432 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=124 x=365 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=125 x=378 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=126 x=393 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=127 x=132 y=0 width=27 height=36 xoffset=-3 yoffset=-2 xadvance=24 page=0 chnl=15
|
||||
char id=160 x=0 y=304 width=7 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=161 x=352 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=162 x=351 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=163 x=336 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=165 x=360 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=167 x=384 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=169 x=433 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=170 x=224 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=171 x=105 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=172 x=0 y=0 width=32 height=36 xoffset=-3 yoffset=-2 xadvance=29 page=0 chnl=15
|
||||
char id=173 x=494 y=38 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=174 x=52 y=76 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=175 x=52 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=176 x=126 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=177 x=435 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=178 x=320 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=179 x=336 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=181 x=459 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=112 x=120 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=113 x=144 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=114 x=396 y=228 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=115 x=168 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=116 x=36 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=182 x=408 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=183 x=498 y=190 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=185 x=192 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=186 x=208 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=187 x=477 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=191 x=456 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=192 x=407 y=0 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=193 x=234 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=194 x=416 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=195 x=156 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=196 x=130 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=197 x=104 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=198 x=190 y=0 width=27 height=36 xoffset=-3 yoffset=-2 xadvance=24 page=0 chnl=15
|
||||
char id=212 x=0 y=76 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=213 x=338 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=214 x=312 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=215 x=357 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=216 x=286 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=217 x=456 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=218 x=480 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=219 x=0 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=220 x=24 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=221 x=48 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=222 x=260 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=223 x=72 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=224 x=96 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=225 x=120 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=226 x=144 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=227 x=168 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=228 x=192 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=229 x=216 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=230 x=219 y=0 width=27 height=36 xoffset=-3 yoffset=-2 xadvance=24 page=0 chnl=15
|
||||
char id=231 x=372 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=73 x=90 y=266 width=16 height=36 xoffset=-3 yoffset=-2 xadvance=13 page=0 chnl=15
|
||||
char id=74 x=216 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=75 x=240 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=76 x=273 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=77 x=100 y=0 width=30 height=36 xoffset=-3 yoffset=-2 xadvance=27 page=0 chnl=15
|
||||
char id=232 x=312 y=152 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=233 x=240 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=234 x=264 y=190 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=235 x=104 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=236 x=430 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=237 x=482 y=266 width=11 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=238 x=160 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=11 page=0 chnl=15
|
||||
char id=239 x=176 y=266 width=14 height=36 xoffset=-3 yoffset=-2 xadvance=8 page=0 chnl=15
|
||||
char id=240 x=128 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=241 x=200 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=242 x=224 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=243 x=248 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=244 x=272 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=245 x=296 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=246 x=320 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=247 x=330 y=190 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=248 x=208 y=38 width=24 height=36 xoffset=-3 yoffset=-2 xadvance=21 page=0 chnl=15
|
||||
char id=249 x=344 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=250 x=368 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=251 x=416 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=252 x=440 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=253 x=464 y=76 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
char id=254 x=0 y=228 width=19 height=36 xoffset=-3 yoffset=-2 xadvance=16 page=0 chnl=15
|
||||
char id=255 x=0 y=114 width=22 height=36 xoffset=-3 yoffset=-2 xadvance=19 page=0 chnl=15
|
||||
BIN
docs/examples/web/text/resources/fonts/pixantiqua.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/pixantiqua.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/fonts/pixelplay.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/pixelplay.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/fonts/romulus.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/romulus.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/fonts/setback.rbmf
Normal file
BIN
docs/examples/web/text/resources/fonts/setback.rbmf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/pixantiqua.ttf
Normal file
BIN
docs/examples/web/text/resources/pixantiqua.ttf
Normal file
Binary file not shown.
BIN
docs/examples/web/text/resources/pixantiqua_0.png
Normal file
BIN
docs/examples/web/text/resources/pixantiqua_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
98
docs/examples/web/text/text_bmfont_ttf.c
Normal file
98
docs/examples/web/text/text_bmfont_ttf.c
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [text] example - BMFont and TTF SpriteFonts loading (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.4 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2016 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
const char msgBm[64] = "THIS IS AN AngelCode SPRITE FONT";
|
||||
const char msgTtf[64] = "THIS SPRITE FONT has been GENERATED from a TTF";
|
||||
|
||||
// NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required)
|
||||
SpriteFont fontBm; // BMFont (AngelCode)
|
||||
SpriteFont fontTtf; // TTF font
|
||||
|
||||
Vector2 fontPosition;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - bmfont and ttf sprite fonts loading");
|
||||
|
||||
fontBm = LoadSpriteFont("resources/bmfont.fnt"); // BMFont (AngelCode)
|
||||
fontTtf = LoadSpriteFont("resources/pixantiqua.ttf"); // TTF font
|
||||
|
||||
fontPosition.x = screenWidth/2 - MeasureTextEx(fontBm, msgBm, fontBm.baseSize, 0).x/2;
|
||||
fontPosition.y = screenHeight/2 - fontBm.baseSize/2 - 80;
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadSpriteFont(fontBm); // AngelCode SpriteFont unloading
|
||||
UnloadSpriteFont(fontTtf); // TTF SpriteFont unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update variables here...
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTextEx(fontBm, msgBm, fontPosition, fontBm.baseSize, 0, MAROON);
|
||||
DrawTextEx(fontTtf, msgTtf, (Vector2){ 75.0f, 240.0f }, fontTtf.baseSize*0.8f, 2, LIME);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
368
docs/examples/web/text/text_bmfont_ttf.data
Normal file
368
docs/examples/web/text/text_bmfont_ttf.data
Normal file
File diff suppressed because one or more lines are too long
239
docs/examples/web/text/text_bmfont_ttf.html
Normal file
239
docs/examples/web/text/text_bmfont_ttf.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_bmfont_ttf.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
49221
docs/examples/web/text/text_bmfont_ttf.js
Normal file
49221
docs/examples/web/text/text_bmfont_ttf.js
Normal file
File diff suppressed because one or more lines are too long
94
docs/examples/web/text/text_bmfont_unordered.c
Normal file
94
docs/examples/web/text/text_bmfont_unordered.c
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [text] example - BMFont unordered chars loading and drawing
|
||||
*
|
||||
* This example has been created using raylib 1.4 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2016 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
const int screenWidth = 800;
|
||||
const int screenHeight = 450;
|
||||
|
||||
// NOTE: Using chars outside the [32..127] limits!
|
||||
// NOTE: If a character is not found in the font, it just renders a space
|
||||
const char msg[256] = "ASCII extended characters:\n¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆ\nÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæ\nçèéêëìíîïðñòóôõö÷øùúûüýþÿ";
|
||||
|
||||
SpriteFont font;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - bmfont unordered loading and drawing");
|
||||
|
||||
// NOTE: Loaded font has an unordered list of characters (chars in the range 32..255)
|
||||
font = LoadSpriteFont("resources/pixantiqua.fnt"); // BMFont (AngelCode)
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadSpriteFont(font); // Unload music stream buffers from RAM
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update variables here...
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawText("Font name: PixAntiqua", 40, 50, 20, GRAY);
|
||||
DrawText(FormatText("Font base size: %i", font.baseSize), 40, 80, 20, GRAY);
|
||||
DrawText(FormatText("Font chars number: %i", font.charsCount), 40, 110, 20, GRAY);
|
||||
|
||||
DrawTextEx(font, msg, (Vector2){ 40, 180 }, font.baseSize, 0, MAROON);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/text/text_bmfont_unordered.data
Normal file
BIN
docs/examples/web/text/text_bmfont_unordered.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
239
docs/examples/web/text/text_bmfont_unordered.html
Normal file
239
docs/examples/web/text/text_bmfont_unordered.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_bmfont_unordered.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
49162
docs/examples/web/text/text_bmfont_unordered.js
Normal file
49162
docs/examples/web/text/text_bmfont_unordered.js
Normal file
File diff suppressed because one or more lines are too long
89
docs/examples/web/text/text_format_text.c
Normal file
89
docs/examples/web/text/text_format_text.c
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Text formatting (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
int score = 100020;
|
||||
int hiscore = 200450;
|
||||
int lives = 5;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - text formatting");
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawText(FormatText("Score: %08i", score), 200, 80, 20, RED);
|
||||
|
||||
DrawText(FormatText("HiScore: %08i", hiscore), 200, 120, 20, GREEN);
|
||||
|
||||
DrawText(FormatText("Lives: %02i", lives), 200, 160, 40, BLUE);
|
||||
|
||||
DrawText(FormatText("Elapsed Time: %02.02f ms", GetFrameTime()*1000), 200, 220, 20, BLACK);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
239
docs/examples/web/text/text_format_text.html
Normal file
239
docs/examples/web/text/text_format_text.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_format_text.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24185
docs/examples/web/text/text_format_text.js
Normal file
24185
docs/examples/web/text/text_format_text.js
Normal file
File diff suppressed because one or more lines are too long
126
docs/examples/web/text/text_rbmf_fonts.c
Normal file
126
docs/examples/web/text/text_rbmf_fonts.c
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - raylib bitmap font (rbmf) loading and usage (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
SpriteFont fonts[8];
|
||||
const int spacings[8] = { 2, 4, 8, 4, 3, 4, 4, 1 };
|
||||
Vector2 positions[8];
|
||||
|
||||
Color *colors;
|
||||
const char (*messages)[64];
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - rBMF fonts");
|
||||
|
||||
Color tempColors[8] = { MAROON, ORANGE, DARKGREEN, DARKBLUE, DARKPURPLE, LIME, GOLD };
|
||||
|
||||
colors = tempColors;
|
||||
|
||||
const char tempMessages[8][64] = { "ALAGARD FONT designed by Hewett Tsoi",
|
||||
"PIXELPLAY FONT designed by Aleksander Shevchuk",
|
||||
"MECHA FONT designed by Captain Falcon",
|
||||
"SETBACK FONT designed by Brian Kent (AEnigma)",
|
||||
"ROMULUS FONT designed by Hewett Tsoi",
|
||||
"PIXANTIQUA FONT designed by Gerhard Grossmann",
|
||||
"ALPHA_BETA FONT designed by Brian Kent (AEnigma)",
|
||||
"JUPITER_CRASH FONT designed by Brian Kent (AEnigma)" };
|
||||
|
||||
messages = tempMessages;
|
||||
|
||||
fonts[0] = LoadSpriteFont("resources/fonts/alagard.rbmf"); // rBMF font loading
|
||||
fonts[1] = LoadSpriteFont("resources/fonts/pixelplay.rbmf"); // rBMF font loading
|
||||
fonts[2] = LoadSpriteFont("resources/fonts/mecha.rbmf"); // rBMF font loading
|
||||
fonts[3] = LoadSpriteFont("resources/fonts/setback.rbmf"); // rBMF font loading
|
||||
fonts[4] = LoadSpriteFont("resources/fonts/romulus.rbmf"); // rBMF font loading
|
||||
fonts[5] = LoadSpriteFont("resources/fonts/pixantiqua.rbmf"); // rBMF font loading
|
||||
fonts[6] = LoadSpriteFont("resources/fonts/alpha_beta.rbmf"); // rBMF font loading
|
||||
fonts[7] = LoadSpriteFont("resources/fonts/jupiter_crash.rbmf"); // rBMF font loading
|
||||
|
||||
for (int i = 0; i < 8; i++)
|
||||
{
|
||||
positions[i].x = screenWidth/2 - MeasureTextEx(fonts[i], messages[i], fonts[i].baseSize*2, spacings[i]).x/2;
|
||||
positions[i].y = 60 + fonts[i].baseSize + 50*i;
|
||||
}
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
for (int i = 0; i < 8; i++)
|
||||
{
|
||||
UnloadSpriteFont(fonts[i]); // SpriteFont unloading
|
||||
}
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawText("free fonts included with raylib", 250, 20, 20, DARKGRAY);
|
||||
DrawLine(220, 50, 590, 50, DARKGRAY);
|
||||
|
||||
for (int i = 0; i < 8; i++)
|
||||
{
|
||||
DrawTextEx(fonts[i], messages[i], positions[i], fonts[i].baseSize*2, spacings[i], colors[i]);
|
||||
}
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/text/text_rbmf_fonts.data
Normal file
BIN
docs/examples/web/text/text_rbmf_fonts.data
Normal file
Binary file not shown.
239
docs/examples/web/text/text_rbmf_fonts.html
Normal file
239
docs/examples/web/text/text_rbmf_fonts.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_rbmf_fonts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
49263
docs/examples/web/text/text_rbmf_fonts.js
Normal file
49263
docs/examples/web/text/text_rbmf_fonts.js
Normal file
File diff suppressed because one or more lines are too long
108
docs/examples/web/text/text_sprite_fonts.c
Normal file
108
docs/examples/web/text/text_sprite_fonts.c
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - SpriteFont loading and usage (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.0 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
const char msg1[50] = "THIS IS A custom SPRITE FONT...";
|
||||
const char msg2[50] = "...and this is ANOTHER CUSTOM font...";
|
||||
const char msg3[50] = "...and a THIRD one! GREAT! :D";
|
||||
|
||||
SpriteFont font1;
|
||||
SpriteFont font2;
|
||||
SpriteFont font3;
|
||||
|
||||
Vector2 fontPosition1, fontPosition2, fontPosition3;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - sprite fonts usage");
|
||||
|
||||
// NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required)
|
||||
font1 = LoadSpriteFont("resources/custom_mecha.png"); // SpriteFont loading
|
||||
font2 = LoadSpriteFont("resources/custom_alagard.png"); // SpriteFont loading
|
||||
font3 = LoadSpriteFont("resources/custom_jupiter_crash.png"); // SpriteFont loading
|
||||
|
||||
fontPosition1.x = screenWidth/2 - MeasureTextEx(font1, msg1, font1.baseSize, -3).x/2;
|
||||
fontPosition1.y = screenHeight/2 - font1.baseSize/2 - 80;
|
||||
|
||||
fontPosition2.x = screenWidth/2 - MeasureTextEx(font2, msg2, font2.baseSize, -2).x/2;
|
||||
fontPosition2.y = screenHeight/2 - font2.baseSize/2 - 10;
|
||||
|
||||
fontPosition3.x = screenWidth/2 - MeasureTextEx(font3, msg3, font3.baseSize, 2).x/2;
|
||||
fontPosition3.y = screenHeight/2 - font3.baseSize/2 + 50;
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadSpriteFont(font1); // SpriteFont unloading
|
||||
UnloadSpriteFont(font2); // SpriteFont unloading
|
||||
UnloadSpriteFont(font3); // SpriteFont unloading
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTextEx(font1, msg1, fontPosition1, font1.baseSize, -3, WHITE);
|
||||
DrawTextEx(font2, msg2, fontPosition2, font2.baseSize, -2, WHITE);
|
||||
DrawTextEx(font3, msg3, fontPosition3, font3.baseSize, 2, WHITE);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/text/text_sprite_fonts.data
Normal file
BIN
docs/examples/web/text/text_sprite_fonts.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
239
docs/examples/web/text/text_sprite_fonts.html
Normal file
239
docs/examples/web/text/text_sprite_fonts.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_sprite_fonts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
49162
docs/examples/web/text/text_sprite_fonts.js
Normal file
49162
docs/examples/web/text/text_sprite_fonts.js
Normal file
File diff suppressed because one or more lines are too long
167
docs/examples/web/text/text_ttf_loading.c
Normal file
167
docs/examples/web/text/text_ttf_loading.c
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [text] example - TTF loading and usage
|
||||
*
|
||||
* This example has been created using raylib 1.3.0 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
const int screenWidth = 800;
|
||||
const int screenHeight = 450;
|
||||
|
||||
const char msg[50] = "TTF SpriteFont";
|
||||
|
||||
SpriteFont font;
|
||||
float fontSize;
|
||||
Vector2 fontPosition = { 40, screenHeight/2 + 50 };
|
||||
Vector2 textSize;
|
||||
|
||||
int currentFontFilter = 0; // FILTER_POINT
|
||||
|
||||
#if !defined(PLATFORM_WEB)
|
||||
int count = 0;
|
||||
char **droppedFiles;
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - ttf loading");
|
||||
|
||||
// NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required)
|
||||
|
||||
// TTF SpriteFont loading with custom generation parameters
|
||||
font = LoadSpriteFontTTF("resources/KAISG.ttf", 96, 0, 0);
|
||||
|
||||
// Generate mipmap levels to use trilinear filtering
|
||||
// NOTE: On 2D drawing it won't be noticeable, it looks like FILTER_BILINEAR
|
||||
GenTextureMipmaps(&font.texture);
|
||||
|
||||
fontSize = font.baseSize;
|
||||
|
||||
SetTextureFilter(font.texture, FILTER_POINT);
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadSpriteFont(font); // SpriteFont unloading
|
||||
|
||||
#if !defined(PLATFORM_WEB)
|
||||
ClearDroppedFiles(); // Clear internal buffers
|
||||
#endif
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
fontSize += GetMouseWheelMove()*4.0f;
|
||||
|
||||
// Choose font texture filter method
|
||||
if (IsKeyPressed(KEY_ONE))
|
||||
{
|
||||
SetTextureFilter(font.texture, FILTER_POINT);
|
||||
currentFontFilter = 0;
|
||||
}
|
||||
else if (IsKeyPressed(KEY_TWO))
|
||||
{
|
||||
SetTextureFilter(font.texture, FILTER_BILINEAR);
|
||||
currentFontFilter = 1;
|
||||
}
|
||||
else if (IsKeyPressed(KEY_THREE))
|
||||
{
|
||||
// NOTE: Trilinear filter won't be noticed on 2D drawing
|
||||
SetTextureFilter(font.texture, FILTER_TRILINEAR);
|
||||
currentFontFilter = 2;
|
||||
}
|
||||
|
||||
textSize = MeasureTextEx(font, msg, fontSize, 0);
|
||||
|
||||
if (IsKeyDown(KEY_LEFT)) fontPosition.x -= 10;
|
||||
else if (IsKeyDown(KEY_RIGHT)) fontPosition.x += 10;
|
||||
|
||||
#if !defined(PLATFORM_WEB)
|
||||
// Load a dropped TTF file dynamically (at current fontSize)
|
||||
if (IsFileDropped())
|
||||
{
|
||||
droppedFiles = GetDroppedFiles(&count);
|
||||
|
||||
if (count == 1) // Only support one ttf file dropped
|
||||
{
|
||||
UnloadSpriteFont(font);
|
||||
font = LoadSpriteFontTTF(droppedFiles[0], fontSize, 0, 0);
|
||||
ClearDroppedFiles();
|
||||
}
|
||||
}
|
||||
#endif
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawText("Use mouse wheel to change font size", 20, 20, 10, GRAY);
|
||||
DrawText("Use KEY_RIGHT and KEY_LEFT to move text", 20, 40, 10, GRAY);
|
||||
DrawText("Use 1, 2, 3 to change texture filter", 20, 60, 10, GRAY);
|
||||
DrawText("Drop a new TTF font for dynamic loading", 20, 80, 10, DARKGRAY);
|
||||
|
||||
DrawTextEx(font, msg, fontPosition, fontSize, 0, BLACK);
|
||||
|
||||
// TODO: It seems texSize measurement is not accurate due to chars offsets...
|
||||
//DrawRectangleLines(fontPosition.x, fontPosition.y, textSize.x, textSize.y, RED);
|
||||
|
||||
DrawRectangle(0, screenHeight - 80, screenWidth, 80, LIGHTGRAY);
|
||||
DrawText(FormatText("Font size: %02.02f", fontSize), 20, screenHeight - 50, 10, DARKGRAY);
|
||||
DrawText(FormatText("Text size: [%02.02f, %02.02f]", textSize.x, textSize.y), 20, screenHeight - 30, 10, DARKGRAY);
|
||||
DrawText("CURRENT TEXTURE FILTER:", 250, 400, 20, GRAY);
|
||||
|
||||
if (currentFontFilter == 0) DrawText("POINT", 570, 400, 20, BLACK);
|
||||
else if (currentFontFilter == 1) DrawText("BILINEAR", 570, 400, 20, BLACK);
|
||||
else if (currentFontFilter == 2) DrawText("TRILINEAR", 570, 400, 20, BLACK);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/text/text_ttf_loading.data
Normal file
BIN
docs/examples/web/text/text_ttf_loading.data
Normal file
Binary file not shown.
239
docs/examples/web/text/text_ttf_loading.html
Normal file
239
docs/examples/web/text/text_ttf_loading.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_ttf_loading.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34089
docs/examples/web/text/text_ttf_loading.js
Normal file
34089
docs/examples/web/text/text_ttf_loading.js
Normal file
File diff suppressed because one or more lines are too long
87
docs/examples/web/text/text_writing_anim.c
Normal file
87
docs/examples/web/text/text_writing_anim.c
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [text] example - Text Writing Animation (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.4 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
const char message[128] = "This sample illustrates a text writing\nanimation effect! Check it out! ;)";
|
||||
|
||||
int framesCounter = 0;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [text] example - text writing anim");
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
framesCounter++;
|
||||
|
||||
if (IsKeyPressed(KEY_ENTER)) framesCounter = 0;
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawText(SubText(message, 0, framesCounter/10), 210, 160, 20, MAROON);
|
||||
|
||||
DrawText("PRESS [ENTER] to RESTART!", 240, 280, 20, LIGHTGRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
239
docs/examples/web/text/text_writing_anim.html
Normal file
239
docs/examples/web/text/text_writing_anim.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="text_writing_anim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24103
docs/examples/web/text/text_writing_anim.js
Normal file
24103
docs/examples/web/text/text_writing_anim.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue