IgeUiDropDown and changing fontface and fontsize

Post your help queries and engine programming questions here

IgeUiDropDown and changing fontface and fontsize

Postby RiaanPie » Fri Jul 29, 2016 1:20 pm

Hello

I have a IgeUiDropDown that is working (Code copied from the UI example), but I am trying to apply my own custom font to it as well as adjust the size of the font. This appears to not be working, even though I used the tool located here: http://www.isogenicengine.com/tools/fontSheetGenerator/

My code:
Code: Select all
textures[2] = new IgeFontSheet('./assets/fonts/eater_26pt.png');

new IgeUiDropDown()
                  .id('optionsDropDown')
                  .top(10)
                  .left(10)
                  .right(10)
                  .options([{
                      text: 'Test 1',
                      value: 'test1'
                  }, {
                      text: 'Test 2',
                      value: 'test2'
                  }, {
                      text: 'Test 3',
                      value: 'test3'
                  }])
               .mount(self.optionsBar);

I know somewhere I should apply the fontSheet, but where?!

When I use the font I generated, I end up with a Javascript error that "characters" is undefined. Also, the JSON parse error is displayed which leads me to believe that it may actually be missing from the PNG that was generated.

When I replace my generated font PNG with one that comes with the samples, the page at least loads, but it doesn't use the font. I am hoping someone could point me in a direction here. I also tried using the IgeUiMenu class, but this class seems incomplete with no substance to the addData function.

Thanks
Riaan
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby rob » Fri Jul 29, 2016 3:42 pm

Hey ya,

I'm not sure that the dropdown supports changing fonts at present. The main dropdown text and the options that are displayed in the dropdown list are all generated via IgeUiLabel classes so if that class supports changing fonts then theoretically it would be very easy to add that into IgeUiDropDown by creating a new method called "font", passing the font you want to use, then updating the class to provide the font when it uses / creates any IgeUiLabel instances.
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby RiaanPie » Fri Jul 29, 2016 8:10 pm

Thank you for your response, Rob. That is indeed what I did and it appears to work (I just added it straight into the class)!

Code: Select all
this._label = new IgeUiLabel()
         .left(0)
         .right(30)
         .top(0)
         .bottom(0)
            .fontSheet(textures[2])
         .mount(this);


Any ideas about generating new fonts with the font tool? I receive this error when I try and load that PNG:
Code: Select all
IgeFontSheet.js:73 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.


The fontsheet in the sample files work fine.
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby rob » Fri Jul 29, 2016 9:32 pm

That error isn't engine related. It's telling you that you are trying to load the image from outside the domain that your game is being served from. The image must be loaded from the same server as the game because of browser security restrictions.
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby RiaanPie » Mon Aug 01, 2016 8:15 am

Ok, so I had to run the file through localhost which fixed the "tainted" issue.

After a bit of debugging, it appears that there is a problem with generating Calibri fonts on my computer through the tool. How odd (and lucky) that it would be the first one that I try and convert using the tool. I can convert other fonts with no problem and load them in my canvas.

Thank you for your input! Much appreciated. I have a few more questions, will post them during the week in separate threads. :)
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby rob » Mon Aug 01, 2016 1:05 pm

No worries, glad I could help!
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby RiaanPie » Thu Aug 04, 2016 1:29 pm

Hi Rob

Sorry to ressurect this, but do you know if there would be a reason why I can load a font generated at 25pt but not the same font at 18pt...?

It's the weirdest thing. I generate the font at 25pt, then download it and load it as a IgeFontSheet and all is OK.
However, when I generate the same font at 18pt (or anything under 25pt) IGE wont load it and I get:

Code: Select all
IgeFontSheet.js:38 Uncaught TypeError: Cannot read property 'characters' of undefined
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby rob » Thu Aug 04, 2016 2:49 pm

Hmm... it *might* be a bug with the font generator. What it does is encode data as pixels as part of the exported font image. If the pixels are encoded incorrectly (maybe the image isn't big enough to encode all the data?) then it could fail because of that. Haven't looked at the code in about 5 years for that generator though so I might be missing something obvious.
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby RiaanPie » Thu Aug 04, 2016 3:01 pm

Oh dear, that's not ideal at all.
Would there be a way for me to perhaps copy the necessary meta manually into the PNG? Wondering how the sample files' fonts were generated.

I guess an alternative would be to use FontEntity over FontSheet...? It will ruin the design I have to work to though :(

Thanks for the input!
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: IgeUiDropDown and changing fontface and fontsize

Postby RiaanPie » Thu Aug 04, 2016 3:26 pm

Ok, it looks like I am able to scale the text by using .scaleBy(-.5, -.5, -.5) in the DropDown class.

I post my class here for reference on how I implemented the FontSheet as well as how I scale it:

Code: Select all
var IgeUiDropDown = IgeUiElement.extend({
   classId: 'IgeUiDropDown',
   
   init: function () {
      var self = this;
      
      IgeUiElement.prototype.init.call(this);
      
      // Define some default styles
      if (!ige.ui.style('.IgeUiDropDownOption')) {
         ige.ui.style('.IgeUiDropDownOption', {
            backgroundColor: null
         });
         
         ige.ui.style('.IgeUiDropDownOption:hover', {
            backgroundColor: '#ccc',
            color: '#ffffff'
         });
      }
      
      // Set defaults
      this.borderColor('transparent');
      this.borderWidth(0);
      this.backgroundColor('transparent');
      this.color('#3d3b3a');
      this.width(20);
      this.height(40);
      //this.fontSheet(textures[2]);
      
      this._options = [];
      this._toggleState = false;
      
      this._label = new IgeUiLabel()
         .left(0)
         .right(0)
         .top(0)
         .bottom(0)
            .fontSheet(textures[2])
            .scaleBy(-.5, -.5, -.5)
         .mount(this);
      
      this.on('mouseUp', function () {
         // Toggle the list drop-down
         self.toggle();
      });
   },
   
   options: function (ops) {
      if (ops !== undefined) {
         this._options = ops;
         
         // Loop the options and check for a selected one
         var arrCount = ops.length;
         
         while (arrCount--) {
            if (ops[arrCount].selected) {
               // Set this option as selected
               this.selectIndex(arrCount);
               return this;
            }
         }
         
         // No item selected, select the first option
         this.selectIndex(0);
         
         return this;
      }
      
      return this;
   },
   
   addOption: function (op) {
      if (op !== undefined) {
         this._options.push(op);
         
         if (op.selected) {
            // Set this option as selected
            this.selectIndex(this._options.length - 1);
            return this;
         }
         
         // No item selected, select the first option
         this.selectIndex(0);
         
         return this;
      }
      
      return this;
   },
   
   removeAllOptions: function () {
      this._options = [];
      this.value({
         text: '',
         value: ''
      });
   },
   
   blur: function () {
      IgeUiElement.prototype.blur.call(this);
      if (this._toggleState) {
         this.toggle();
      }
   },
   
   selectIndex: function (index) {
      if (this._options[index]) {
         this.value(this._options[index]);
          //this.emit('change', this.value());
         emitter.emit('change', this.value());
      }
   },
   
   value: function (val) {
      if (val !== undefined) {
         IgeUiElement.prototype.value.call(this, val);
         this._label.value(val.text);
         return this;
      }
      
      return this._value.value;
   },

   toggle: function () {
      this._toggleState = !this._toggleState;
      
       //console.log(emitter);
        //emitter.emit("toggleDropDown")

      if (this._toggleState) {
         var self = this,
            optionContainer,
            mainTop = this._bounds2d.y + 5,
            mainHeight = this._options.length * 30,
            optionTop = 0,
            i;
         
         optionContainer =new IgeUiElement()
            .id(this._id + '_options')
            .backgroundColor(getCatColor())
            .borderColor(this._borderColor)
            .borderWidth(this._borderWidth)
            .top(mainTop)
            .width(this._bounds2d.x)
            .height(mainHeight+60)
            .mount(this);
         
         for (i = 0; i < this._options.length; i++) {
            ige.ui.style('#' + this._id + '_options_' + i, {
               color: this._color
            });
            
            new IgeUiLabel()
               .id(this._id + '_options_' + i)
               .data('optionIndex', i)
               .styleClass('IgeUiDropDownOption')
               .value(this._options[i].text)
               .top((this._bounds2d.y * i) + 1)
               .left(1)
               .width(this._bounds2d.x - 2)
               .height(this._bounds2d.y - 2)
                    .scaleBy(-.5, -.5, -.5)
               .allowFocus(true)
               .allowActive(true)
               .allowHover(true)
               .mouseUp(function () {
                  self.selectIndex(this.data('optionIndex'));
               })
                    .fontSheet(textures[2])
               .mount(optionContainer);
         }
      } else {
         ige.$(this._id + '_options').destroy();
      }
   },
   
   tick: function (ctx) {
      IgeUiElement.prototype.tick.call(this, ctx);
      
      // Draw drop-down box
      ctx.fillStyle = '#f2f2f2';
      ctx.fillRect(Math.floor(this._bounds2d.x2) - 45, -this._bounds2d.y2 + 1, 45, this._bounds2d.y - 2);
      ctx.opacity = 0.3;
      
      // Chevron
       //ctx.strokeStyle = this._color;
      ctx.strokeStyle = "#3d3b3a"
      ctx.beginPath();
      ctx.moveTo(this._bounds2d.x2 - 32.5, -this._bounds2d.y2 + 14.5);
      ctx.lineTo(this._bounds2d.x2 - 22, 5.5);
      ctx.lineTo(this._bounds2d.x2 - 10.5, -this._bounds2d.y2 + 14.5);
      ctx.stroke();
      
      this._renderBorder(ctx);
   }
});

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = IgeUiDropDown; }
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Next

Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron