Add bitmap font support

Fix some theme loading issues
fix misc issues

EZGUI.csproj

@@ -18,6 +18,8 @@
     <IISExpressUseClassicPipelineMode />
   </PropertyGroup>
   <ItemGroup>
+    <Content Include="assets\fonts\CarterOne-72.png" />
+    <Content Include="assets\fonts\desyrel.png" />
     <Content Include="assets\kenney-theme\images\bg.png" />
     <Content Include="assets\kenney-theme\images\btn-blue-bg-down.png" />
     <Content Include="assets\kenney-theme\images\btn-blue-bg.png" />
@@ -77,6 +79,7 @@
     <Content Include="examples\01-window\1-simple.html" />
     <Content Include="examples\02-button\1-simple.html" />
     <Content Include="examples\02-button\2-skin.html" />
+    <Content Include="examples\fonts\01.html" />
     <Content Include="examples\game\gui.js" />
     <Content Include="examples\game\index.html" />
     <Content Include="examples\Phaser\index.html" />
@@ -90,6 +93,7 @@
     <TypeScriptCompile Include="src\tween\Easing.ts" />
     <TypeScriptCompile Include="src\tween\Interpolation.ts" />
     <TypeScriptCompile Include="src\tween\Tween.ts" />
+    <TypeScriptCompile Include="src\utils\ColorParser.ts" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="assets\kenney-theme\kenney-atlas.json" />
@@ -111,12 +115,15 @@
     <TypeScriptCompile Include="src\MultistateTilingSprite.ts" />
     <TypeScriptCompile Include="src\polyfills\performance.ts" />
     <TypeScriptCompile Include="src\Theme.ts" />
-    <TypeScriptCompile Include="src\utils.ts" />
+    <TypeScriptCompile Include="src\utils\utils.ts" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="assets\metalworks-theme\metalworks-theme.json" />
   </ItemGroup>
-  <ItemGroup />
+  <ItemGroup>
+    <Content Include="assets\fonts\CarterOne-72.fnt" />
+    <Content Include="assets\fonts\desyrel.fnt" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">12.0</VisualStudioVersion>
   </PropertyGroup>

README.md

@@ -14,6 +14,7 @@ Features.
  * Flexible configuration : EZGUI use a flexible JSON configuration format for theme an gui definitions
  * Themes : a default theme is provided but you can create your own custom theme.
  * Tweening 
+ * Bitmap fonts
  * Extendable : you can easily create your own components
 
 
@@ -27,13 +28,11 @@ implemented components
  * Radio
  * Slider
  * List 
-
 
 
 
 TODO 
 ----
- * bitmap fonts support
  * tabs component
  * scrollbar component
  * texts/texts alignements 
@@ -44,5 +43,8 @@ TODO
 
 
 
+Known issues 
+------------
+Bitmap font tint don't work in some PIXI v2 versions and Phaser.
 
 

assets/fonts/Skranji-Bold-40.fnt

@@ -0,0 +1,101 @@
+<font>
+  <info face="Skranji" size="40" bold="1" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="2,2,2,2" spacing="0,0" outline="0"/>
+  <common lineHeight="54" base="39" scaleW="229" scaleH="508" pages="1" packed="0"/>
+  <pages>
+    <page id="0" file="Skranji-Bold-40.png"/>
+  </pages>
+  <chars count="91">
+    <char id="97" x="2" y="2" width="27" height="29" xoffset="-1" yoffset="8" xadvance="22" page="0" chnl="15"/>
+    <char id="98" x="2" y="33" width="29" height="37" xoffset="0" yoffset="1" xadvance="26" page="0" chnl="15"/>
+    <char id="99" x="2" y="72" width="23" height="31" xoffset="-1" yoffset="7" xadvance="19" page="0" chnl="15"/>
+    <char id="100" x="2" y="105" width="30" height="37" xoffset="-1" yoffset="0" xadvance="27" page="0" chnl="15"/>
+    <char id="101" x="27" y="72" width="27" height="31" xoffset="-1" yoffset="7" xadvance="23" page="0" chnl="15"/>
+    <char id="102" x="33" y="2" width="24" height="37" xoffset="-1" yoffset="0" xadvance="17" page="0" chnl="15"/>
+    <char id="103" x="2" y="144" width="27" height="43" xoffset="-1" yoffset="8" xadvance="24" page="0" chnl="15"/>
+    <char id="104" x="2" y="189" width="27" height="37" xoffset="0" yoffset="0" xadvance="24" page="0" chnl="15"/>
+    <char id="105" x="2" y="228" width="14" height="37" xoffset="0" yoffset="0" xadvance="12" page="0" chnl="15"/>
+    <char id="106" x="2" y="267" width="21" height="50" xoffset="-7" yoffset="0" xadvance="12" page="0" chnl="15"/>
+    <char id="107" x="18" y="228" width="26" height="37" xoffset="0" yoffset="0" xadvance="22" page="0" chnl="15"/>
+    <char id="108" x="31" y="144" width="14" height="36" xoffset="0" yoffset="1" xadvance="12" page="0" chnl="15"/>
+    <char id="109" x="33" y="41" width="39" height="29" xoffset="0" yoffset="8" xadvance="37" page="0" chnl="15"/>
+    <char id="110" x="59" y="2" width="27" height="29" xoffset="0" yoffset="8" xadvance="24" page="0" chnl="15"/>
+    <char id="111" x="34" y="105" width="32" height="30" xoffset="-1" yoffset="8" xadvance="28" page="0" chnl="15"/>
+    <char id="112" x="31" y="182" width="30" height="42" xoffset="-1" yoffset="8" xadvance="26" page="0" chnl="15"/>
+    <char id="113" x="47" y="137" width="30" height="42" xoffset="-1" yoffset="8" xadvance="26" page="0" chnl="15"/>
+    <char id="114" x="56" y="72" width="23" height="30" xoffset="-1" yoffset="7" xadvance="19" page="0" chnl="15"/>
+    <char id="115" x="74" y="33" width="19" height="32" xoffset="-1" yoffset="6" xadvance="15" page="0" chnl="15"/>
+    <char id="116" x="2" y="319" width="23" height="37" xoffset="-2" yoffset="1" xadvance="17" page="0" chnl="15"/>
+    <char id="117" x="88" y="2" width="26" height="29" xoffset="-1" yoffset="8" xadvance="23" page="0" chnl="15"/>
+    <char id="118" x="68" y="104" width="26" height="29" xoffset="-3" yoffset="8" xadvance="20" page="0" chnl="15"/>
+    <char id="119" x="81" y="67" width="39" height="29" xoffset="-3" yoffset="8" xadvance="32" page="0" chnl="15"/>
+    <char id="120" x="95" y="33" width="28" height="29" xoffset="-2" yoffset="8" xadvance="21" page="0" chnl="15"/>
+    <char id="121" x="25" y="267" width="27" height="43" xoffset="-1" yoffset="8" xadvance="24" page="0" chnl="15"/>
+    <char id="122" x="116" y="2" width="26" height="29" xoffset="-1" yoffset="8" xadvance="20" page="0" chnl="15"/>
+    <char id="65" x="46" y="226" width="37" height="34" xoffset="-2" yoffset="2" xadvance="31" page="0" chnl="15"/>
+    <char id="66" x="63" y="181" width="31" height="35" xoffset="0" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="67" x="79" y="135" width="27" height="36" xoffset="-1" yoffset="2" xadvance="23" page="0" chnl="15"/>
+    <char id="68" x="96" y="98" width="31" height="34" xoffset="0" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="69" x="125" y="33" width="28" height="35" xoffset="0" yoffset="2" xadvance="26" page="0" chnl="15"/>
+    <char id="70" x="2" y="358" width="28" height="35" xoffset="0" yoffset="2" xadvance="24" page="0" chnl="15"/>
+    <char id="71" x="27" y="312" width="30" height="36" xoffset="-1" yoffset="2" xadvance="27" page="0" chnl="15"/>
+    <char id="72" x="54" y="262" width="32" height="35" xoffset="0" yoffset="2" xadvance="30" page="0" chnl="15"/>
+    <char id="73" x="85" y="218" width="16" height="35" xoffset="0" yoffset="2" xadvance="14" page="0" chnl="15"/>
+    <char id="74" x="96" y="173" width="26" height="36" xoffset="-1" yoffset="2" xadvance="23" page="0" chnl="15"/>
+    <char id="75" x="108" y="134" width="32" height="35" xoffset="0" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="76" x="129" y="70" width="28" height="35" xoffset="-1" yoffset="2" xadvance="24" page="0" chnl="15"/>
+    <char id="77" x="155" y="2" width="46" height="36" xoffset="-1" yoffset="2" xadvance="42" page="0" chnl="15"/>
+    <char id="78" x="2" y="395" width="33" height="35" xoffset="0" yoffset="2" xadvance="31" page="0" chnl="15"/>
+    <char id="79" x="32" y="350" width="39" height="37" xoffset="-1" yoffset="1" xadvance="35" page="0" chnl="15"/>
+    <char id="80" x="59" y="299" width="30" height="35" xoffset="0" yoffset="2" xadvance="27" page="0" chnl="15"/>
+    <char id="81" x="88" y="255" width="39" height="38" xoffset="-1" yoffset="1" xadvance="35" page="0" chnl="15"/>
+    <char id="82" x="103" y="211" width="30" height="35" xoffset="0" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="83" x="124" y="171" width="20" height="37" xoffset="-1" yoffset="1" xadvance="16" page="0" chnl="15"/>
+    <char id="84" x="142" y="107" width="31" height="36" xoffset="-2" yoffset="2" xadvance="26" page="0" chnl="15"/>
+    <char id="85" x="159" y="40" width="33" height="36" xoffset="0" yoffset="2" xadvance="31" page="0" chnl="15"/>
+    <char id="86" x="2" y="432" width="37" height="36" xoffset="-3" yoffset="2" xadvance="30" page="0" chnl="15"/>
+    <char id="87" x="2" y="470" width="53" height="36" xoffset="-3" yoffset="2" xadvance="45" page="0" chnl="15"/>
+    <char id="88" x="37" y="389" width="33" height="35" xoffset="-2" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="89" x="41" y="426" width="33" height="35" xoffset="-3" yoffset="2" xadvance="25" page="0" chnl="15"/>
+    <char id="90" x="72" y="389" width="31" height="35" xoffset="-1" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="48" x="57" y="463" width="30" height="36" xoffset="-1" yoffset="2" xadvance="27" page="0" chnl="15"/>
+    <char id="49" x="76" y="426" width="18" height="35" xoffset="-2" yoffset="2" xadvance="15" page="0" chnl="15"/>
+    <char id="50" x="89" y="463" width="27" height="35" xoffset="-1" yoffset="2" xadvance="23" page="0" chnl="15"/>
+    <char id="51" x="73" y="336" width="27" height="36" xoffset="-1" yoffset="2" xadvance="23" page="0" chnl="15"/>
+    <char id="52" x="96" y="426" width="30" height="34" xoffset="-2" yoffset="2" xadvance="26" page="0" chnl="15"/>
+    <char id="53" x="91" y="295" width="27" height="35" xoffset="0" yoffset="2" xadvance="24" page="0" chnl="15"/>
+    <char id="54" x="118" y="462" width="28" height="36" xoffset="-1" yoffset="2" xadvance="25" page="0" chnl="15"/>
+    <char id="55" x="102" y="332" width="27" height="35" xoffset="-1" yoffset="2" xadvance="23" page="0" chnl="15"/>
+    <char id="56" x="105" y="369" width="28" height="36" xoffset="-1" yoffset="2" xadvance="25" page="0" chnl="15"/>
+    <char id="57" x="128" y="407" width="29" height="36" xoffset="-1" yoffset="2" xadvance="25" page="0" chnl="15"/>
+    <char id="33" x="120" y="295" width="15" height="35" xoffset="-1" yoffset="2" xadvance="12" page="0" chnl="15"/>
+    <char id="8470" x="56" y="104" width="0" height="0" xoffset="0" yoffset="33" xadvance="13" page="0" chnl="15"/>
+    <char id="59" x="159" y="78" width="15" height="25" xoffset="-2" yoffset="15" xadvance="11" page="0" chnl="15"/>
+    <char id="37" x="131" y="332" width="32" height="35" xoffset="-1" yoffset="2" xadvance="28" page="0" chnl="15"/>
+    <char id="58" x="142" y="145" width="13" height="22" xoffset="-1" yoffset="15" xadvance="10" page="0" chnl="15"/>
+    <char id="63" x="135" y="369" width="25" height="36" xoffset="-2" yoffset="2" xadvance="19" page="0" chnl="15"/>
+    <char id="42" x="129" y="248" width="25" height="24" xoffset="-1" yoffset="2" xadvance="21" page="0" chnl="15"/>
+    <char id="40" x="137" y="274" width="16" height="38" xoffset="0" yoffset="0" xadvance="13" page="0" chnl="15"/>
+    <char id="41" x="155" y="274" width="16" height="38" xoffset="-1" yoffset="0" xadvance="13" page="0" chnl="15"/>
+    <char id="95" x="128" y="445" width="43" height="12" xoffset="-2" yoffset="26" xadvance="37" page="0" chnl="15"/>
+    <char id="43" x="159" y="407" width="23" height="23" xoffset="-1" yoffset="8" xadvance="19" page="0" chnl="15"/>
+    <char id="45" x="105" y="407" width="21" height="11" xoffset="-1" yoffset="14" xadvance="18" page="0" chnl="15"/>
+    <char id="61" x="162" y="369" width="22" height="18" xoffset="-1" yoffset="11" xadvance="19" page="0" chnl="15"/>
+    <char id="46" x="159" y="432" width="13" height="11" xoffset="-1" yoffset="25" xadvance="9" page="0" chnl="15"/>
+    <char id="44" x="162" y="389" width="15" height="15" xoffset="-2" yoffset="26" xadvance="10" page="0" chnl="15"/>
+    <char id="47" x="135" y="210" width="21" height="35" xoffset="-2" yoffset="2" xadvance="17" page="0" chnl="15"/>
+    <char id="124" x="146" y="169" width="10" height="35" xoffset="0" yoffset="2" xadvance="8" page="0" chnl="15"/>
+    <char id="92" x="148" y="459" width="21" height="34" xoffset="-1" yoffset="2" xadvance="17" page="0" chnl="15"/>
+    <char id="34" x="157" y="145" width="19" height="18" xoffset="-1" yoffset="2" xadvance="16" page="0" chnl="15"/>
+    <char id="39" x="156" y="247" width="12" height="18" xoffset="-1" yoffset="2" xadvance="8" page="0" chnl="15"/>
+    <char id="64" x="175" y="105" width="37" height="36" xoffset="-1" yoffset="2" xadvance="33" page="0" chnl="15"/>
+    <char id="35" x="171" y="459" width="34" height="35" xoffset="-2" yoffset="2" xadvance="29" page="0" chnl="15"/>
+    <char id="36" x="165" y="314" width="26" height="36" xoffset="-1" yoffset="2" xadvance="23" page="0" chnl="15"/>
+    <char id="94" x="176" y="78" width="23" height="22" xoffset="-2" yoffset="2" xadvance="17" page="0" chnl="15"/>
+    <char id="38" x="194" y="40" width="33" height="35" xoffset="-1" yoffset="2" xadvance="25" page="0" chnl="15"/>
+    <char id="123" x="184" y="389" width="15" height="37" xoffset="-1" yoffset="1" xadvance="11" page="0" chnl="15"/>
+    <char id="125" x="158" y="165" width="15" height="37" xoffset="-2" yoffset="1" xadvance="11" page="0" chnl="15"/>
+    <char id="91" x="158" y="204" width="14" height="37" xoffset="0" yoffset="1" xadvance="10" page="0" chnl="15"/>
+    <char id="93" x="173" y="243" width="13" height="37" xoffset="-1" yoffset="1" xadvance="10" page="0" chnl="15"/>
+    <char id="32" x="0" y="0" width="0" height="0" xoffset="-1" yoffset="1" xadvance="13" page="0" chnl="15"/>
+  </chars>
+</font>