CocosSharp game on Android startup takes a long time to draw graphics - xamarin

We have a somewhat simple game written using CocosSharp. The game is within another Xamarin.Forms app. When the player clicks to play the game, we bring them to a splash screen. On iOS this screen displays immediately but on Android, the screen is just black for about 15 seconds. The music plays pretty much immediately on both platforms.
The following is called from the ViewCreated event of the CocosSharpView.
InitializeAudio();
var scene = new Scenes.SplashScene(GameView);
GameView.RunWithScene(scene);
The hang up seems to be when creating labels. The following take ~10 seconds to complete with 99% of it being in the constructor of the first label. We call our CreateText in the constructor.
private void CreateText()
{
var label = new CCLabel("Text 1", "BD_CARTOON_SHOUT.TTF", 80)
{
PositionX = layer.ContentSize.Width / 2.0f,
PositionY = layer.ContentSize.Height / 1.5f,
Color = CCColor3B.DarkGray
};
layer.AddChild(label);
label = new CCLabel("Text 2", "BD_CARTOON_SHOUT.TTF", 60)
{
PositionX = layer.ContentSize.Width / 2.0f,
PositionY = 50f,
Color = CCColor3B.DarkGray
};
layer.AddChild(label);
}
Keep in mind this only happens on Android.
Thanks in advance!

I had the same issue several weeks ago. The problem was CCLabel constructor
where it didn't know which type of font are you using and therefore trying all other types before finally trying the last one which is correct. You need to specify font type in CCLabel constructor like this:
var label = new CCLabel("Text 1", "BD_CARTOON_SHOUT.TTF", 80, CCLabelFormat.SystemFont);
Hope it helps.

Related

Storyboard animation only displays last frame

I have to create an animation for a Windows Phone 8.1 app. I want to change the ImageSource property of my Page.Background to display an animated splash when the app launches.
I used this sample as a model: http://www.codeproject.com/Tips/823622/Images-Animation-By-Using-Story-Board-in-Windows-P
In my code, the animation lasts 8 seconds for 80 images, but the screen stays black for 8 seconds, then only displays the last frame.
private void setupStoryboard()
{
storyboard = new Storyboard();
var animation = new ObjectAnimationUsingKeyFrames();
Storyboard.SetTarget(animation, BackgroundBrush);
Storyboard.SetTargetProperty(animation, "ImageSource");
storyboard.Children.Add(animation);
for (int i = 0; i <= 80; i++)
{
var keyframe = new DiscreteObjectKeyFrame
{
KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(100 * i)), //Time Interval
Value = String.Format("ms-appx:///Assets/Animation/splash{0:D2}.png", i) //Source of images
};
animation.KeyFrames.Add(keyframe);
}
Resources.Add("Storyboard", storyboard); //Add story board to resources
}
This code is called from OnNavigatedTo, and I have a button to call storyboard.Begin();
This problem appears on simulator and device.
Update: The problem persists with a greater interval (1000ms), and smaller images (30KB jpg instead of 240KB png)
Update: Same problem with an <Image> tag
Update: Still not solved, but I managed to obtain the desired effect. I created a DispatcherTimer to manually change the image. Unfortunately, this creates a nasty flickering effect. I had to add a second identical image on top of the first, and alternate between the two: imageA loads source1, imageB loads source2, imageA loads source3, ImageB loads source4...
Mission completed, with duct tape.

Storyboard-Animating a Grid from CodeBehind

I need a MenuBar on the left side of my screen that can slide in and out. As this app is crossplattform it should be on the left side and not like the usual ApplicationBar on the Bottom or NavigationBar on Top.
What I have so far is:
private bool isTapped = false;
private void TEST_TAP(object sender, TappedRoutedEventArgs e)
{
System.Diagnostics.Debug.WriteLine("TAP");
Storyboard s = new Storyboard();
DoubleAnimation doubleAni = new DoubleAnimation();
doubleAni.To = -30;
if (isTapped) doubleAni.To = 0;
doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(500));
Storyboard.SetTarget(doubleAni, LOGO);
Storyboard.SetTargetProperty(doubleAni, "(UIElement.RenderTransform).(TranslateTransform.XProperty)");
s.Children.Add(doubleAni);
s.Begin();
}
The bar I want to move is a Grid or should be something similar. But this even fails to move a single Image. I googled a bit and replaced "(UIElement.RenderTransform).(TranslateTransform.XProperty)" with "(Canvas.Left)". This doesn't crash but also doesn't move anything else.
Any ideas or solutions?
EDIT:
Well I played around a lot and now I know (and tested it) that "(Canvas.Left)" only works inside of a Canvas. Yay.
My App looks like this: Scrollview (horizontal) and inside is a Grid with columns to display different stuff. The left-most Column contains another Grid that I want to move out of the screen and back in again. But how do I move a grid with Storyboard-animation?
If anybody thinks of a different way to do this, I'm totally happy if it works in any way.
EDIT2:
It seems to be THE way to use Storyboard.SetTargetProperty(doubleAni, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)"); but it keeps crashing =/
Before using this transform you need to add it:
Storyboard s = new Storyboard();
DoubleAnimation doubleAni = new DoubleAnimation();
doubleAni.To = to;
doubleAni.From = from;
doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(250));
// THIS LINE IS NEW
NaviBar.RenderTransform = new CompositeTransform();
Storyboard.SetTarget(doubleAni, NaviBar);
Storyboard.SetTargetProperty(doubleAni, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
s.Children.Add(doubleAni);
s.Begin();
This does the trick. It's still not the functionality that I wanted but the hardest part - the animation - works now.

AS3: FPS drops down significantly because of innocent mouse moves

I have ~10000 objects in my game and exactly 60 (maximum) FPS when mouse isn't moved. But just when you start moving mouse in circles FPS tries to reach 30 averaging at 45. When you stop mouse it's INSTANTLY 60 (as so program lost it's heartbeat). SWF is run standalone - without any browsers.
I removed any MouseEvent.MOUSE_MOVE listeners and made mouseEnabled=false and mouseChildren=false for the main class.
I increased my FPS one-by-one from 12 to 60 - I gave name to each frame I born and it's really painful watching how 15 of them die just because of nothing...
Sample code:
public class Main extends Sprite
{
private var _periods : int = 0;
/** Idling FPS is 23. Move mouse to drop FPS to 21.*/
public function Main() : void
{
//true if need to drop FPS to 18 instead of 21 moving mouse:
const readyToKill2MoreFrames : Boolean = true;
if ( readyToKill2MoreFrames )
{
var ellipse : Sprite = new Sprite;
ellipse.graphics.beginFill( 0x00FF00 );
ellipse.graphics.drawEllipse( 300, 300, 400, 200 );
ellipse.graphics.endFill();
addChild( ellipse );
//uncomment to fall only to 21 instead of 18:
/*ellipse.mouseChildren = false;
ellipse.mouseEnabled = false;*/
}
var fps : TextField = new TextField;
//uncommenting doesn't change FPS:
//fps.mouseEnabled = false;
addChild( fps );
fps.text = "???";
fps.scaleX = fps.scaleY = 3;
var timer : Timer = new Timer( 1000 );
timer.addEventListener( TimerEvent.TIMER, function( ... args ) : void
{
fps.text = _periods.toString();
_periods = 0;
} );
timer.start();
addEventListener( Event.ENTER_FRAME, function( ... args ) : void
{
//seems like PC is too fast to demonstrate mouse movement
// drawbacks when he has nothing else to do, so let's make
// his attention flow:
for ( var i : int = 0; i < 500000; ++i )
{
var j : int = 2 + 2;
}
++_periods;
} );
}
}
You've probably moved on to more modern problems, but I've recently struggled with this issue myself, so here's an answer for future unfortunates stuck with the problems created by Adobe's decade-old sins.
It turns out legacy support for old-style buttons is the culprit. Quote from Adobe's tutorial on the excellent Scout profiling tool:
"Flash Player has some special code to handle old-style button objects (the kind that you create in Flash Professional).
Independently of looking for ActionScript event handlers for mouse
events, it searches the display list for any of these buttons whenever
the mouse moves. This can be expensive if you have a large number of
objects on the display list. Unfortunately, this operation happens
even if you don't use old-style button objects, but Adobe is working
on a fix for this."
Turns out Adobe never really got around to fixing this, so any large number of DisplayObjects will wreak havoc on your FPS while the mouse is moved. Only fix is to merge them somehow, e.g. by batch drawing them using Graphics. In my early tests, it seems setting mouseEnabled = false has no real effect, either.

JavaFX: pause transition, not equal times

I have written a small application that performs some long-running tasks. Instead of having the user to wait and seeing just a progress bar, I would like to display some (changing) information about the application.
For that purpose, I wrote the following code within the constructor of an extended Pane:
FadeTransition fadeOutTransition = new FadeTransition(Duration.millis(1000), this);
fadeOutTransition.setFromValue(0.8);
fadeOutTransition.setToValue(0.0);
Similarly the fadeInTransition. And further...
SequentialTransition seqTransition = new SequentialTransition (
new Transition() {
{ setInterpolator(Interpolator.DISCRETE);
setCycleDuration(Duration.seconds(1)); }
protected void interpolate(double frac) {
int nextElement = (int) ((explenations.size() - 1) * Math.random());
Explenation explenation = explenations.get(nextElement);
questionLabel.setText(explenation.getQuestion());
answerLabel.setText(explenation.getAnswer());
}
},
fadeInTransition,
new PauseTransition(Duration.seconds(15)),
fadeOutTransition
);
What I woud like is the text to fade in, stay there for ~15 seconds and then fade out again. Unfortunately, the animation flickers, moves faster and slower - and the PauseTransition never takes 15 seconds! What is wrong about the code? I'm using Java 7, and JavaFX 2.2 on Mac OS X.
The problem seems to be that I called the function
seqTransition.play();
multiple times. From there comes probably the flickering and the unequal waiting time.

Paint an image, wait 1 second then dismiss it

I'm trying to paint a green box where the user touched the screen, wait 1 second, then dismiss the box. Any ideas why this code isn't working? The box never paints. If I use a thread, the animation wipes out the box.
public static void DrawClick(RectangleF rect, UIView theView)
{
var center = Center(rect);
center.X = center.X + 30f;
center.Y = center.Y + 30f;
var greenRect = new RectangleF(center, new SizeF(60f, 60f));
var clickView = new UIImageView(greenRect);
clickView.Image = appDelegate.store.GetArt("greenbox.png");
theView.AddSubview(clickView);
//Wait 1 second
System.Threading.Thread.Sleep(1000);
clickView.RemoveFromSuperview();
}
Thanks,
Rick
You block the main UI thread for 1 second, so there is no way for it to render.
One way to do it is with a System.Timers.Timer with a 1 second duration, making sure to call BeginInvokeOnMainThread to update the UI when it fires.
Example here of BeginInvokeOnMainThread. Here is one for System.Timers.Timer.
A cooler option would be to use animations with the Alpha value, see here.

Resources