Achieving amazing graphics performance
<![CDATA[// <![CDATA[ // <![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // ]]<![CDATA[> // ]]]]><![CDATA[>]]>
One important rule to achieve smooth graphics in our applications is: No calculations and objects creating in onDraw functions. On iOS may run onDraw functions up to 60 times per second. Thanks to high FPS, optimization of this function is very important.
Every calculation and creating new objects in drawing functions slows this function.
Non-optimalized function may contain a lot of operations, which causes that this function runs too long.
I have created two sample applications. First, non-optimalized, contains lots of calculations and object
creating. These operations take too much time to run in onDraw function. This sample codes uses Moscrif SDK.
Non-optimized function:
...= function(sender, canvas) { //create objects var textPaint = new Paint(); textPaint.color = 0xff7DFAFF; textPaint.typeface = Typeface.fromName("36 days ago BRK"); textPaint.textSize = System.width / 10; var paint = new Paint(); paint.color = 0xffffffff; //vector drawing app.drawCenteredPath(canvas, app.icons[#menuShadow], paint, sender, 0, sender.height/2 - sender.height/4 + 2, System.width );
//create shader var start = { ... } var end = { ... }; ... var clrs = new Array(); ... var pos = new Array(); ... var shader = Shader.linear(pts, clrs, pos,0); paint.shader = shader; //native drawing canvas.drawRect(0, 0, System.width, sender.height - sender.height/4, paint); //calculations var textAreaHeight = sender.height - sender.height/4; //time string creating var timeString = sender.time / 60 + ":" + sender.time%60; var (w, h) = textPaint.measureText(timeString); canvas.drawText(timeString, sender.width / 2 - w / 2, textAreaHeight / 3 + h / 2, textPaint); }
Optimized function:
function drawMenu(sender, canvas) { this.paint.color = 0xffffffff;
canvas.drawPath(this.whitePath, this.paint);
//draw rect filled with gradient canvas.drawRect(0, 0, System.width, sender.height - sender.height/4, this.shaderPaint);
//draw vector path of menu graphics canvas.drawPath(this.blackPath, this.shaderPaint); canvas.drawText(this._timeString, sender.width / 2 - this.timeWidth / 2, sender.height / 4 + this.timeHeight / 2, this.timePaint); canvas.drawText(this._text, sender.width / 2 - this.textWidth / 2, sender.height / 2 + this.timeHeight / 2, this.textPaint); }
As you can see optimized function calls only methods from native canvas object. Thanks to the hardware graphics accelerator on devices are these calls extremely fast. Optimized function runs fast and reliable. Optimized function also requires less processor performance, what means that battery life is also longer.
Thanks to this type of optimization your applications will able to achive heigh avarage FPS and draw smooth graphics.
