I am building a spritesheetbuilder class when I can pass in spritesheets that may have a different number of total frames and I would like to know is there a way to dynamically find out how many frames there are in a spritesheet and then loop through them all without having to setup the animations frame by frame? The loop parameter is a boolean value already working.
//SpriteSheetAnimator(bmp, w, h, loop)
this.monitor = new SpriteSheetAnimator(loader.getResult('img'), 204, 189, true);
//inside the SpriteSheetAnimator object
this._ss = new createjs.SpriteSheet({
animations:{
play:{
frames: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
speed: 0.4
},
images:[this.bmp],
frames: {
width:this.width,
height:this.height,
regX:this.width*0.5,
regY:this.height*0.5
}
});
To play all of the frames in a Sprite, just play it from 0: mySprite.gotoAndPlay(0)
To get the number of frames, use mySpriteSheet.getNumFrames().
http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html
Related
So I have this body that is a circle collider
and it has sometimes a big velocity
the problem is that the tiled map of the boundaries is made of small tiles
and at high velocity the body goes through it
here is my config of all bodies:
const config = {
inertia: Infinity, // do not spin
friction: 0, // X*100% stop on hit
frictionAir: 0, // X*100% slow on move
restitution: 0.5, // bounce X*100% on hit
collisionFilter: this.level.getCollisionFilter(), // default collision filter
isStatic
}
...
getCollisionFilter (key = null) {
switch (key) {
case 'fly':
return {
category: 0x0008,
mask: 0xFFFFFFF1,
group: -1
}
case 'items':
return {
category: 0x0004,
mask: 0xFFFFFFF1,
group: -1
}
case 'woda':
return {
category: 0x0002,
mask: 0xFFFFFFFF,
group: -1
}
default:
return {
category: 0x0001,
mask: 0xFFFFFFFF,
group: 0
}
}
}
```
woda means water if it's of any relevance
this is between the default and woda
The problem is that matter.js you are using has no continuous collision detection. It has been a feature request for a few years. Now that doesn't mean there is nothing you can do. There is some code in the issue description itself which is probably the cheapest way of fixing issue with going through rectangular boundaries:
It detects if a body is outside the world bounds and then reverses the velocity and translates the body back
Alternatively, this post gives a few ideas.
If you want to implement something yourself, I'll try to explain continuous collision detection algorithm.
Basically, for each moving object in your scene you have to calculate moment of next collision within the fraction of the frame 0<t0<1, then advance positions to this moment t0 within the frame, update velocities due to collision and proceed further to the next collision t0<t1<1, until you reach time of tn=1 (end of frame), making sure you don't get stuck in a the middle of the frame due to rounding of calculation or "cornered" objects. For spherical colliders, that is usually done by using capsule vs capsule (for pairs of objects) intersection and capsule vs box for the boundaries.
You can also cheat by having multiple hidden frames at a slower speed:
take highest object velocity
take smallest object collider radius
divide highest velocity by smallest radius of your colliders and get 'slowdown scale' rounded it to an integer
slow down all the objects in the scene by that integer 'slowdown scale' and update scene 'slowdown scale' times, without redrawing the screen
redraw the screen only once with result of 'slowdown scale' updates and you should get same positions as without slowdown, but respecting collisions
Good luck colliding!
I am creating a small game in the Unity game engine, and the map for the game is generated from a 2d tilemap. The tilemap contains so many tiles, though, is is very hard for a device like a phone to render them all, so the frame rate drops. The map is completely static in that the only moving thing in the game is a main character sprite and the camera following it. The map itself has no moving objects, it is very simple, there must be a way to render only the needed sections of it or perhaps just render the map in once. All I have discovered from researching the topic is that perhaps a good way to do it is buy using the Unity mesh class to turn the tilemap into a mesh. I could not figure out how to do this with a 2d tilemap, and I could not see how it would benefit the render time anyways, but if anyone could point me in the right direction for rendering large 2d tilemaps that would be fantastic. Thanks.
Tile system:
To make the tile map work I put every individual tile as a prefab in my prefab folder, with the attributes changed for 2d box colliders and scaled size. I attribute each individual prefab of the tile to a certain color on the RGB scale, and then import a png file that has the corresponding colors of the prefabs where I want them like this:
I then wrote a script which will place each prefab where its associated color is. It would look like this for one tile:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Map : MonoBehaviour {
private int levelWidth;
private int levelHeight;
public Transform block13;
private Color[] tileColors;
public Color block13Color;
public Texture2D levelTexture;
public PlayerMobility playerMobility;
// Use this for initialization
void Start () {
levelWidth = levelTexture.width;
levelHeight = levelTexture.height;
loadLevel ();
}
// Update is called once per frame
void Update () {
}
void loadLevel(){
tileColors = new Color[levelWidth * levelHeight];
tileColors = levelTexture.GetPixels ();
for (int y = 0; y < levelHeight; y++) {
for (int x = 0; x < levelWidth; x++) {
// if (tileColors [x + y * levelWidth] == block13Color) {
// Instantiate(block13, new Vector3(x, y), Quaternion.identity);
// }
//
}
}
}
}
This results in a map that looks like this when used with all the code (I took out all the code for the other prefabs to save space)
You can instantiate tiles that are in range of the camera and destroy tiles that are not. There are several ways to do this. But first make sure that what's consuming your resources is in fact the large number of tiles, not something else.
One way is to create an empty parent gameObject to every tile (right click in "Hierarchy" > Create Empty"
then attach a script to this parent. This script has a reference to the camera (tell me if you need help with that) and calculates the distance between it and the camera and instantiates the tile if the distance is less than a value, otherwise destroys the instance (if it's there).
It has to do this in the Update function to check for the distances every frame, or you can use "Coroutines" to do less checks (more efficient).
Another way is to attach a script to the camera that has an array with instances of all tiles and checks on their distances from the camera the same way. You can do this if you only have exactly one large tilemap because it would be hard to re-use this script if you have more than a large tilemap.
Also you can calculate the distance between the tile and the character sprite instead of the camera. Pick whichever is more convenient.
After doing the above and you still get frame-drops you can zoom-in the camera to include less tiles in its range but you'd have to recalculate the distances then.
In my Cocos2d js android app i have a UI button as
var button=new ccui.Button();
button.loadTextures(res.play_png,res.play_png);
button.setAnchorPoint(cc.p(0,0));
button.x=size.width/2;
button.y=size.height/2;
this.addChild(button);
The button loads and i am able to set it at any position on the screen.
But i am unable to change its width and height to specified number of pixels.
I want something like
button.width=100;
button.height=100;
I did not find any method to do that...
Any help how to accomplish this would be greatful.
Thanks.
The buttons i use are options like play,how to play,share etc..
So i have to position them in such a way that they dont overlap or get distorted for various screen resolutions...
How can i use the setScale method in this context???
We can make a call to a function that can scale the size of the UIButton by performing an action. In this case, the following code might help:
performScaleAction : function()
{
var duration = 0; // duration in seconds for performing this action
var scaleX = 0.5; // scale factor for X-axis
var scaleY = 0.5; // scale factor for Y-axis
var scaleAction = new cc.ScaleTo(duration , scaleX , scaleY );
this.runAction(scaleAction);
}
Now, call the above function in the following way:
this.performScaleAction();
this.addChild(button);
So, if the actual height of the image used for creating the UIButton is h, in this case, the new size as displayed on the screen would be h times scaleX . Same for the width of the UIButton.
Hope this helps!
I have a method that I use to render little map using tiles, but when I finish rendering and I want to make a translation changing "transY" variable using different method nothing happens, so I must call RenderTesture() again to make it. How can I do this withot unnecessary rendering because it can slow down application when I use larger number of tiles?
void RenderTexture ()
{
MakeCurrent ();
GL.Clear((int)All.ColorBufferBit | (int)All.DepthBufferBit);
GL.MatrixMode(All.Modelview);
GL.LoadIdentity();
GL.Translate(-transX, transY, -10);
for (int i = 0; i < tileRows; i++)
{
for (int j = 0; j < tileColumns; j++)
{
GL.BindTexture(All.Texture2D, textureIds [i*tileColumns + j]);
GL.EnableClientState(All.VertexArray);
GL.EnableClientState(All.TextureCoordArray);
GL.PushMatrix ();
GL.Translate(j*2, -i*2, 0);
GL.VertexPointer(3, All.Float, 0, frontV);
GL.TexCoordPointer(2, All.Float, 0, frontT);
GL.DrawArrays (All.TriangleFan, 0, 4);
GL.PopMatrix ();
}
}
GL.DisableClientState(All.VertexArray);
GL.DisableClientState(All.TextureCoordArray);
SwapBuffers ();
}
If anybody have advice for me, I'll be very grateful!
Thanks in advance!
The bottleneck lies, most likely, in the amount of state changes (GL.BindTexture) and the amount of draw calls you are making (GL.DrawArrays). In general, you should draw as much as possible in a single draw call.
The simplest approach wold be to use a "texture atlas":
combine all your tile textures into a single large texture (this is the "texture atlas")
combine all your tile vertices into a single vertex array
call GL.BindTexture once to bind the texture atlas
call GL.DrawArrays once to render all tiles
So how do you render different tile textures? Simple: you change the vertex texture coordinates to point to the correct tile inside the texture atlas.
A single 1024x1024 can hold 256 distinct 64x64 tiles. Depending on the amount of distinct tiles in your game, you might have to use multiple texture atlases. Moreover, depending on the size of your map, you might wish to split it into "regions" with separate vertex arrays for each (you don't want to render 1 million tiles every frame if your monitor can only display 1000 tiles.)
On its own, this will give a measurable performance boost. Once this is working, you can get a second large boost by storing your vertex arrays on the GPU via Vertex Buffer Objects (VBOs).
Thank you very much!
The "Texture atlas" strategy can be very good idea. I've implemented that last night and it looks like rendering is getting speed. I've reduce loading of NxM tiles using separate textures, by loading one big NxM tiles bitmap using single texture and I've implemented method to change vertex array (in regard to new bitmap dimensions - NxM)
public void UpdateFrontVertex(int rowNumber, int columnsNumber)
{
for (int i = 0; i < 12; i++) {
if (i % 3 == 0)
frontVertex [i] = defaultFrontVertex[i] * rowNumber; // x-axis
else if (i % 3 == 1)
frontVertex [i] = defaultFrontVertex[i] * columnsNumber; // y-axis
else if (i % 3 == 2)
frontVertex [i] = defaultFrontVertex[i]; // z-axis
}
}
After that, I've got my map!!!
I still cannot compare performances before that implementation and now because I have to make changes for panning and zooming functionalities to work with that new rendering strategy.
For example, I've used
//zoom in
transY = (transY * 2 + 1);
transX = (transX * 2 + 1);
//zoom out
transX = ((transX - 1) / 2);
transY = ((transY - 1) / 2);
for zooming calculations to figure out which tile is my central tile, and after that to load all rounding tiles.
Thank you again for great help, I'll proceed now with panning and zooming implementation.
I need to search for some special features/patterns that might be visible in only one (or two) of many frames. The frame rate can be as slow as 25 frames per second and the video may contain over 7500 frames. I often start by scanning the video at high speed looking for a segment where I might find the feature, then rewind. I repeat this procedure while gradually reducing the playback speed, until I find a fairly small time window in which I can expect to find the feature (if it is present). I would then like to step forward and backward by single frames using key hit events (e.g. right arrow and left arrow keys) to find the feature of interest. I have managed to use HTML5 with JavaScript to control the forward speed; but, still do not know how to use the keyboard for single frame stepping forward and backward through a video. How can this be accomplished? Note, my web browser is Firefox 26 running on a Windows 7 platform.
You can seek to any time in the video by setting the currentTime property. Something like this:
var video = document.getElementById('video'),
frameTime = 1 / 25; //assume 25 fps
window.addEventListener('keypress', function (evt) {
if (video.paused) { //or you can force it to pause here
if (evt.keyCode === 37) { //left arrow
//one frame back
video.currentTime = Math.max(0, video.currentTime - frameTime);
} else if (evt.keyCode === 39) { //right arrow
//one frame forward
//Don't go past the end, otherwise you may get an error
video.currentTime = Math.min(video.duration, video.currentTime + frameTime);
}
}
});
Just a couple things you need to be aware of, though they shouldn't cause you too much trouble:
There is no way to detect the frame rate, so you have to either hard-code it or list it in some lookup table or guess.
Seeking may take a few milliseconds or more and does not happen synchronously. The browser needs some time to load the video from the network (if it's not already loaded) and to decode the frame. If you need to know when seeking is done, you can listen for the 'seeked' event.
You can check to see if the video has advanced to the next frame by checking the
targetTime += (1 / 25) // 25 fps
video.currentTime = targetTime // set the video frame
if (video.currentTime >= video.duration) { // if it's the end of the video
alert('done!');
}
if (video.currentTime == targetTime) { // frame has been updated
}