mwatt Posted January 7, 2015 Share Posted January 7, 2015 Hello all, I want to ask the assembled community two distinct question that bear on a related topic. I will preface my questions by saying that I am sure that at least some of this information is already covered in other posts and some or all of the answers could be gleaned by studying the Pixi/Phaser source. However, answers can change over time and pouring over both sources while worthwhile, would be no small task. Here are my questions: 1. What is the recurring cost, if any, of using scaleTo on a graphic? For example, is there a performance hit during updates or during collision testing? 2. If one wished to design a game that would play well on a screen the size of an iPhone 4 and also on larger iPad resolution displays, how many versions of the same image would one need to create and what about the aspect ratio in each case? Thanks in advance. Link to comment Share on other sites More sharing options...
alex_h Posted January 7, 2015 Share Posted January 7, 2015 To partially answer question 2, a common approach is to have three sets of graphics. The largest caters for retina tablets (@4x)The next is half scale and caters for retina phones and non-retina tablets (@2x)The smallest is quarter scale and caters for non-retina phones.You can work around aspect ratio by having your main game content centred on screen and matching either width or height (according to preference / requirements) and cropping the other edges.I've used this approach a lot and found it to work very well. Link to comment Share on other sites More sharing options...
rich Posted January 7, 2015 Share Posted January 7, 2015 Scaling texture, especially in WebGL, is extremely cheap. In any GPU accelerated environment (be that HW accelerated Canvas, or WebGL) it's trivial for the GPU to scale the object. On non-HW accel hardware when it has to rasterise it in software then it's more expensive, yes, but you can consider that an edge case these days (unless you need to support really old browsers). Link to comment Share on other sites More sharing options...
mwatt Posted January 7, 2015 Author Share Posted January 7, 2015 Thanks for the replies Alex and Rich, this is helpful. Rich, is the hit on the scaling (even if cheap) a one shot thing, perhaps when Pixie is loading it's internal cache? Or must it be paid for with every rendering and collision check? My concern is for the mobile environment - I am not cognizant of what kind of hardware acceleration occurs on those browsers. The fear would be that perhaps only the newest browsers on iPhone and Android enjoy this feature in the mobile world. Can you speak to this? Link to comment Share on other sites More sharing options...
rich Posted January 7, 2015 Share Posted January 7, 2015 It runs the transform every frame. Collision is nothing to do with rendering, that just impacts the CPU. Scaling is a GPU operation. I wouldn't worry about it at all to be honest. Just scale away. In the scale of things (heh, pun intended) it's nothing compared to any number of other factors that could slow things down. Link to comment Share on other sites More sharing options...
mwatt Posted January 8, 2015 Author Share Posted January 8, 2015 To partially answer question 2, a common approach is to have three sets of graphics. The largest caters for retina tablets (@4x)The next is half scale and caters for retina phones and non-retina tablets (@2x)The smallest is quarter scale and caters for non-retina phones.You can work around aspect ratio by having your main game content centred on screen and matching either width or height (according to preference / requirements) and cropping the other edges.I've used this approach a lot and found it to work very well. Alex, may I ask what methodology you are using to detect *when* to load which set? Are you evaluationg screen width in conjunction with device pixel ratio? Are you sniffing the user agent? Something else? All of the above? Many thanks for your continued help in this. Link to comment Share on other sites More sharing options...
alex_h Posted January 8, 2015 Share Posted January 8, 2015 Actually yes a combination of factors, but primarily window.innerWidth & window.innerHeight * window.devicePixelRatio. So for example if I'm in landscape and the window width is less than 640px then I load the @1x graphics set. If the user agent tells me I'm running in the Android stock browser though then I ignore the window dimensions and always run with the lowest scale version in order to try to get the best performance. Link to comment Share on other sites More sharing options...
mwatt Posted January 8, 2015 Author Share Posted January 8, 2015 I'm going to mark this puppy solved on the basis of your answers and the input from Rich. As powerful as this game engine is, it is the community that puts it over the top. Thanks again to the both of you. MichaelD 1 Link to comment Share on other sites More sharing options...
Recommended Posts