We are doing a small mobile game with react-native. But now we are not sure if react-native is a good choice for what we wanted to create.
Our game is simply just working with tiles in a not that small "map". Lets say its 1000 x 1000 Tiles so at the end 1.000.000 Tiles.
1) Our first try was to render 1 Mio. Components - which ended bad. Even 100 x 100 is like impossible to render with react-native.
2) We ended up to add some logic which renders just tiles inside the view. But when doing any action (and new tiles get rendered) the app is laggy as hell.
3) So we made sure no Tile get ever recreated and instead we just changed props so the tile change the position instead of being recreated. This ended up also in a laggy as hell experience (even when its like 20 Tiles just changing the prop).
After these we decided that React-Native has no nice performance for what we wanted to create: A big tile map with some interactions.
4) So we were thinking of using canvas for drawing the tiles in our react-native app, but it seems that this is also not the common way. We've found some canvas packages for react-native but these are just adding a few components which are useless for our project - with these components we would also end up by rendering components like . But the goal would be to have one ref where we can use the canvas benefits.
So - if react-native is too laggy for doing stuff like this in his own way and canvas is not useable as it is in web what would be the recommended way to solve a project like this ? Or is the answer maybe that react-native is the wrong system to solve a project like this ? Any suggestions ?
IMHO, I will never recommend react-native to make a game like you are describing (with tilemap), less-UI-focused games like poker, trading cards is totally fine though.
But you are likely rendering thousands of tiles without any clipping? How about try to enable View clipping? See removeClippedSubviews here: https://facebook.github.io/react-native/docs/view.html
If you still want to push with react-native, I suggest using plugins like this: https://github.com/ProjectSeptemberInc/gl-react-native
The purpose is to have an OpenGL ES canvas to accelerate your game rendering.
Otherwise, for 2D games, cocos2d-js seems fit to you (it seems your background is javascript), although it will requires some compiler knowledge to get the game actually running on mobile device. The other solution would be Unity 3D (2D is completely find with this engine). Each engine has their own pros/cons, so I would suggest you to try both at basic level to see which one is more suitable.
Related
I use a flatList to make my activity feed.
However, I have a problem with the fluidity of my list
Each item can render up to 80 static images of 25kb, each in an absolute view, I still have to play with the performance when I mount my components but when I scroll, if I have my 80 images per item, my list is absolutely not fluid!
However, when I check my rendering number, I have very few because I use PureComponent for my items.
I check the RAM, and everything looks good!
My UI and JS Threads are constantly at 60!
Could this be due to the number of views I see in "Perf Monitor" that goes up to more than 3000? If it's that, how do I fix it?
Hoping to have a solution,
Thank you
Viktor
I've been facing the same issue , but after reading docs ive implemented the below :
You can use the community packages (such as react-native-fast-image
from #DylanVann) for more performant images. Every image in your list
is a new Image() instance. The faster it reaches the loaded hook, the
faster your Javascript thread will be free again.
You should always use react-native-fast-image for more images.
Hope it helps. Feel free for doubts
I had issue in my android version. I set resizeMethod="resize". This gave me massive performance boost.
I was loading lot of large images in section list and FlatList. Using resizeMethod as resize resolved my issue, and scroll is buttery smooth after this.
First of all let me give a bit of context to make the question more precise:
I am developing an Android game (using SurfaceView, Canvas, etc), and it is working perfectly for the gameplay part. I initially tried to use View-derived elements on top of it for menus and other UI elements, and rapidly realized by experimentation and looking at some questions here on Stackoverflow that this was a really bad idea, since they dont mix well (say a LinearLayout on top of a SurfaceView).
I see 3 possible paths:
A) Continue using View elements on top of SurfaceView (and deal with the problems with it, such as horrendous lag)
B) Draw UI elements manually on SurfaceView/Canvas. Something like: canvas.drawBitmap(menuBitmap, posX, posY, ...); and then handle the touches manually, and suffer with screen fragmentation
C) Use a library/framework designed specifically for this that handles all the drawing of UI, touch on buttons, drag to scroll, etc. Something like the View and its derived elements, but designed for games and apps that draw using SurfaceView.
Are there more options that Im not seeing? And "C" seems the best to me, but is there a library for that? Which one?
Edit: forgot to ask the most obvious question, also: How does other professional/commercial games deal with this?
Thanks
I really don't like these game engines (AndEngine, Corona, Unity3D, cocos2d, etc). I want to learn Android, which will be more useful for my professional life than engine X or Y.
All my games were created without game engines. I use option (A) for almost everything and I don't see any lag or sluggishness.
Examples:
The game screen for Minesweeper 3D is a set of layouts and views plus a SurfaceView to hold the OpenGL 3D field.
The game screen for Box Topple is also a set of layouts and views together with a custom view created to handle and display the box2d physics engine.
See my other games as well...
I had these same exact issues.
Then I found a free game engine called AndEngine.
This engine handles just about everything you need.
For example:
OpenGL wrapper classes for simple, efficient drawing
Sprite classes (animated or not)
Particle effects
Cameras to view different parts of the scene you draw on
Scrolling backgrounds
Online multiplayer and Box2D physics engine extensions
etc.
And for your case:
It has a HUD that you attach to a camera, which stays static as the camera moves.
You can then attach buttons (already built-in, with click events) to this.
Here is some example code to create a button:
moveRightButton = new ButtonSprite(10, 10, moveRightButtonTexture, getVertexBufferObjectManager()) {
#Override
public boolean onAreaTouched(TouchEvent event, float x, float y) {
if (event.isActionDown()) {
player.moveRight();
// Set to 'clicked' image
this.setCurrentTileIndex(1);
}
else if (event.isActionUp()) {
// Set to 'unclicked' image
this.setCurrentTileIndex(0);
}
return super.onAreaTouched(event, x, y);
};
};
You can find the engine and its extensions at https://github.com/nicolasgramlich?tab=repositories.
The main problem with the engine is that there is no documentation.
However, there is a forum dedicated to the engine at http://www.andengine.org/forums/.
Also, you can download AndEngine Examples (via the same repository I mentioned above), created by the developer to give examples of usages of various aspects of the engine.
It takes a bit to get used to, but it has been very rewarding.
I've created many types of interfaces using the Cocoa API — some of them using documented basic animation techniques and others simply by experimenting (such as placing an animated .gif inside an NSImage class) — which had somewhat catastrophic consequences. The question I have is what is the correct or the most effective way to create an animated and dynamic GUI so that it runs optimally and properly?
The closest example I can think of that would use a similar type of animation would be something one might see done in flash on any number of interactive websites or interfaces. I'm sure flash can be used in a Cocoa app, although if there is a way to achieve a similar result without re-inventing the wheel, or having to use 3rd party SDKs, I would love to get some input. Keep in mind I'm not just thinking of animation for games, iOS, etc. — I'm most interested in an animated GUI for Mac OS X, and making it 'flow' as one might interact in it.
If u wish to add many graphics animations, then go for OpenGLES based xcode project for iOS. That helps u to reduce performance problem. You can render each of the frames in gif as 2D texture.
I would recommend that you take a look at Core Animation. It is Apples framework for hardware accelerated animations for both OS X and iOS. It's built for making animated GUIs.
You can animate the property changes for things like position, opacity, color, transforms etc and also animate gradients with CAGradientLayer and animate non-rectagunal shapes using CAShapeLayer and a lot of other things.
A good resource to get you started is the Core Animation Programming Guide.
Have a code that renders custom Views and placed on a ScrollView (n by n) with dynamic width per view.
I've been having sluggish performance when running it in Tablet 10.1 but seems ok in Tablet 7.0.
Would there be any improvements if I replaced Views with SurfaceView?
Or would a single SurfaceView with mapped cell work instead? I've found this sample project but using this as a guide for the current code seems.. difficult, what with different widths on custom views and the resolution on other devices.
Any other suggestions?
It depends on the hardware but if you are running on the emulator, it's not accurate. If you are using real devices, try to avoid using custom a lot of custom views because it will be sluggish in a scrollview. Try at least to use standard widgets and move the "custom" parts to another view, it's the simplest, most accesible, and easier to code solution to your problem.
A listview calling another activity would be the fastest and most user friendly approach IMHO.
I've built a screensaver for Leopard which utilises core-animation. It doesn't do anything overly complicated; uses a tree of CALayers and CATextLayers to produce a "table" of data in the following structure:
- root
› maincontainer
› subcontainer
› row [multiple]
› cell [multiple]
› text layer
At most there are 50 CALayers rendered on the screen at any one time.
Once I've built the "table", I'm adding animating the "subcontainer" into view using CABasicAnimation. Again, I'm not doing anything fancy - just a simple fade-in.
The problem is that while the animation does happen its painful to watch. It's jerky on my development machine which is a 3.06Ghz iMac with 4GB of RAM, and seems to chop the animation into 10 steps rather than showing a gradual change.
It gets worse on the ppc mac-mini the screensaver is targeted for; it refuses to even play the animation, generally "tweening" from the beginning of the animation (0% opacity) to half-way (50%) then completing.
I'm relatively new to ObjectiveC and my experience is based on using garbage-collected environments, but I can't believe I'm leaking enough memory at the point the screensaver starts to cause such problems.
Also, I'm quite sure its not a problem with the hardware. I've tested the built-in screensavers which use core-animation, and downloaded a few free CA-based for comparison, and they run without issue on both machines.
Information is pretty thin on Google with regards to using CA in screensavers, or using CA in general for that matter, and advice/tutorials on profiling/troubling screensavers seems to be non-existant. So any help the community can provide would be well welcomed!
--- UPDATE ---
Seems as though implicit animations help smooth things out a little. Still kinda jerky, but not as bad as trying to animate everything with explicit animations as in my solution.
There isn't much special about a screen saver. I assume you've started with the Core Animation Programming Guide? Running it through Instruments will give you a lot of information about where you're taking too much time.
The code you're using to do the fade-in would be useful. For what you're describing, you don't even need CABasicAnimation; you can just set the animatable properties of the layers, and they by default animate. Make sure you've read up on Implicit Animations. The rest of that page is probably of use as well.
Most of your job in CoreAnimation is getting out of the way. I generally knows what it's doing, and most problems come from second guessing it to trying to tell it too much.