A few questions I have

[LinkTree]

Hi, I was hopeing someone could help me out by explaining how exactly the hires option works? from what I understood it loads higher res assets named with @2x when a resolution threshold is reached. so lets say I set my game width to 640px and height to 360px wouldn't it display the high res assets at double that size?(1280x720)

because on my mobile phone the res is 1280x720 yet it still loads the lower res assets. what am I doing wrong?

 

what would be the best course of action for supporting multiple resolutions while keeping everything looking sharp in panda.js?

 

in some cases Text's align: 'center' property causes the font to render blurry on mobile devices(doesn't happen on my desktop screen) what would be to best way to circumvent this?

 

thank you.

[Ninjadoodle]

Hi @LinkTree

 

I wrote a little article about these settings

 

If you're phone has a 'retina' screen, you might need to enable retina as well, in order to counteract the magnifying effect.

 

Hope this helps!

[LinkTree]

Hi @LinkTree

 

I wrote a little article about these settings

 

If you're phone has a 'retina' screen, you might need to enable retina as well, in order to counteract the magnifying effect.

 

Hope this helps!

Hi Ninjadoodle! love your work! I often refer to your blog and games to learn how to do something. I saw that article but I felt like there wasn't enough explanation around that subject.

I noticed that if I enabled the retina property it did use the @2x assets but I was under the assumption it should be looking for @4x assets because ratina multiply by 2 and hires:2 multiply by 2.

also when the assets gets larger my text stays the same size. how do I find if the hires is active so I could multiply my fonts by 2 as well?

[Ninjadoodle]

Hi LinkTree

 

Thanks, I'm happy I can help a little

 

The whole hires and retina thing is quite confusing. It took me a while to understand why you need to use them together.

 

On my Macbook pro, unless I enable retina, the game will load @2x assets only. With retina enabled and hires:4 - I can load @4x assets and things look nice & crisp.

 

Without retina enabled, my 2880x1800 screen actually gets treated as 1440x900.

 

With fonts I use bmGlyph and export @2x and @4x assets, just like with graphics.

 

Also, if you do use it, use the sparrow format.

 

Let me know if you need more help!

[LinkTree]

Hi LinkTree

 

Thanks, I'm happy I can help a little

 

The whole hires and retina thing is quite confusing. It took me a while to understand why you need to use them together.

 

On my Macbook pro, unless I enable retina, the game will load @2x assets only. With retina enabled and hires:4 - I can load @4x assets and things look nice & crisp.

 

Without retina enabled ... my 2880x1800 screen actually gets treated as a 1440x900.

 

With fonts I use bmGlyph and export @2x and @4x assets, just like with graphics.

 

Also, if you do use it, use the sparrow format.

 

Let me know if you need more help!

Thank you for the quick response! Ok I think I understand now the retina and hires properties. I also found out there is a property named hires under game.system that tells you if the game is rendering in hires or not(same for retina) and based on that and on game.system.width/game.system.originalWidth you can get the current scale value and multiply your text font size by it.

 

unfortunately I don't have a Mac so I can't use that program. I use Littera instead even though the output is not very clean in my opinion and I need to fix some letters positioning by hand.

[Ninjadoodle]

Hi @LinkTree

 

Cool, happy it makes sense to you now.

 

BTW, you can use game.scale to multiply the size of your text.

 

For example, I always position things on screen and multiply them by game.scale.

 

This way they will always be in the right place, at all resolutions.

 

var sprite = new game.Sprite('hero.png');

sprite.position.set(240*game.scale, 160*game.scale);

this.stage.addChild(sprite);

 

PS. It's a shame you can't use bmGlyph as it's a really good program. Maybe there's something like it for PC.

 

Also, what game are you currently working on?

[LinkTree]

Great! didn't know about game.scale.

the only other software I know about for windows is http://www.angelcode.com/products/bmfont/ but it is very limited in it's styles and colors but I think it produces cleaner outputs though I haven't tried it.

 

I am mostly playing around with the framework trying to learn it but I am trying to make a simple memory card game focusing mostly on the design part of it with nice graphics and animations.

[Ninjadoodle]

Sounds cool! If you need any help let me know

[LinkTree]

Sounds cool! If you need any help let me know

thanks.

 

I just ran into this issue when rendering text with a stroke I think it is more pixi related than panda but I figured I'll ask here first. I took this image from another thread here. it shows the issue pretty well. do you see these sharp black extrusions from the text stroke? I am not sure what's causing this. it happens when you try to give text a wide stroke and depends on the size of the font. larger fonts require wider stroke to make this issue noticeable.

 

[enpu]

I would suggest you to use bitmap fonts.

[LinkTree]

I would suggest you to use bitmap fonts.

I would use them but I need the word wrap and wordwrapwidth functionality and only Text has it.

[LinkTree]

Ok, Thanks to SebastianNette over at the pixi.js subforum I found that panda's pixi lib is missing the lineJoin property for the Text class and that's what's controlling these spikes so I had to add it myself.

 

What I did was add this

style.lineJoin = style.lineJoin || 'miter';style.miterLimit = style.miterLimit || 10;

to PIXI.Text.prototype.setStyle

 

and this

this.context.lineJoin = this.style.lineJoin;this.context.miterLimit = this.style.miterLimit;

to PIXI.Text.prototype.updateText after

this.context.textBaseline = 'alphabetic';

and then when you create yout text object you specify either the property lineJoin: 'round' or miterLimit: 2(I think this number needs to be increased/decreased depending on your font size)