Jump to content

A few questions I have


LinkTree
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

fgEhXVj.jpg

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...