I wrote a game with Phaser engine but sadly i didn't get any good performance even with cocoonjs. I tried to optimize it but i don't think i can optimize enough.
So i'm trying to switch to cocos2d-js. I tried some examples with cocos2d and it works well. I think i will get the performance i'm looking for. I just need to achieve two things. I tried to use methods in DrawNode class but i couldn't do it. I'm new to computer graphics.
Drawing a slice, Just like the drawSlice method from this gist
Writing text along an arc with the given radius and angle
Update: I'll need the expensive calculations done by native code. I have around 18 of this shape independently animating the radius by 75-200 pixels in 100ms with user input. The problem i faced in Phaser was this expensive calculations.
Update2: Right now i'm able to draw this with #Sebastian's help. It's still incomplete.
Update3: I got good performance with Phaser with a few hacks. Maybe i won't need this, though others might need it.
Slice:
Text:
that functionality isn't done yet in cocos2d-html5. The best solution I can offer you is this function I submitted a while ago. It's not ideal, but it should do the trick. I'll wrap this function in the neccesary boilerplate code later if you don't know what to do with it (I'm a few hours away from my home PC and I don't have the time to make a full example right now):
var drawSolidArc= function(center, radius, degreesFrom, degreesTo, segments){
if(degreesTo<degreesFrom){
var temp = degreesTo;
degreesTo = degreesFrom;
degreesFrom = temp;
}
var i;
for(i=degreesFrom; i<=degreesTo;i++){
cc.drawingUtil.drawCircle(center, radius, cc.DEGREES_TO_RADIANS(-i+90), segments, true);
}
};
Also, this code is for v2.2.2, and it should be migrated to use v2.2.3's (or v3) DrawNode. Sorry for the incomplete answer, but I hope it'll send you in the right direction for the moment.
As for writing curved text, I think this is the closest thing I know exists: https://github.com/supersuraccoon/CircleLabelTTFDemo-HTML5
Related
This may be a stupid/previously answered question, but it is something that has been stumping me and my friends for a little while, and I have been unable to find a good answer.
Right now, i make all my JS Canvas games run in ticks. For example:
function tick(){
//calculate character position
//clear canvas
//draw sprites to canvas
if(gameOn == true)
t = setTimeout(tick(), timeout)
}
This works fine for CPU-cheep games on high-end systems, but when i try to draw a little more every tick, it starts to run in slow motion. So my question is, how can i keep the x,y position and hit-detection calculations going at full speed while allowing a variable framerate?
Side Note: I have tried to use the requestAnimationFrame API, but to be honest it was a little confusing (not all that many good tutorials on it) and, while it might speed up your processing, it doesn't entirely fix the problem.
Thanks guys -- any help is appreciated.
RequestAnimationFrame makes a big difference. It's probably the solution to your problem. There are two more things you could do: set up a second tick system which handles the model side of it, e.g. hit detection. A good example of this is how PhysiJS does it. It goes one step further, and uses a feature of some new browsers called a web worker. It allows you to utilise a second CPU core. John Resig has a good tutorial. But be warned, it's complicated, is not very well supported (and hence buggy, it tends to crash a lot).
Really, request animation frame is very simple, it's just a couple of lines which once you've set up you can forget about it. It shouldn't change any of your existing code. It is a bit of a challenge to understand what the code does but you can pretty much cut-and-replace your setTimeout code for the examples out there. If you ask me, setTimeout is just as complicated! They do virtually the same thing, except setTimeout has a delay time, whereas requestAnimationFrame doesn't - it just calls your function when it's ready, rather than after a set period of time.
You're not actually using the ticks. What's hapenning is that you are repeatedly calling tick() over and over and over again. You need to remove the () and just leave setTimeout(tick,timeout); Personally I like to use arguments.callee to explicitly state that a function calls itself (and thereby removing the dependency of knowing the function name).
With that being said, what I like to do when implementing a variable frame rate is to simplify the underlying engine as much as possible. For instance, to make a ball bounce against a wall, I check if the line from the ball's previous position to the next one hits the wall and, if so, when.
That being said you need to be careful because some browsers halt all JavaScript execution when a contaxt menu (or any other menu) is opened, so you could end up with a gap of several seconds or even minutes between two "frames". Personally I think frame-based timing is the way to go in most cases.
As Kolink mentioned. The setTimeout looks like a bug. Assuming it's only a typo and not actually a bug I'd say that it is unlikely that it's the animation itself (that is to say, DOM updates) that's really slowing down your code.
How much is a little more? I've animated hundreds of elements on screen at once with good results on IE7 in VMWare on a 1.2GHz Atom netbook (slowest browser I have on the slowest machine I have, the VMWare is because I use Linux).
In my experience, hit detection if not done properly causes the most slowdown when the number of elements you're animating increases. That's because a naive implementation is essentially exponential (it will try to do n^n compares). The way around this is to filter out the comparisons to avoid unnecessary comparisons.
One of the most common ways of doing this in game engines (regardless of language) is to segment your world map into a larger set of grids. Then you only do hit detection of items in the same grid (and adjacent grids if you want to be more accurate). This greatly reduces the number of comparisons you need to make especially if you have lots of characters.
I'm new to HTML5/Canvas/Game programming, but have been tinkering around with it after reading a couple of books. I THINK I have a fairly good idea of how things work out. This question asks several smaller questions, but in general is basically a "structural approach" question. I'm not expecting verbose responses, but hopefully small pointers here and there :) Here is a link to a non-scrolling, and currently rather boring Super Mario World.
Super Mario World Test
NOTE: Controls are Left/Right and Spacebar to jump. This is only setup for Firefox right now as I'm just learning.
Did I Do Something Wrong at This Point?
Currently I've just focused on how Mario runs and jumps, and think that I've gotten it down fairly okay. The coin box doesn't do anything and the background is just an image loaded in for looks. Here's my approach, please let me know if there is anything entirely wrong with this:
Allows Mario to jump by enacting on 2 Y velocities (Gravity and Jump variables)
Allows Mario to run by enacting on 1 velocity (Left or Right "Friction" + Acceleration)
Sprites are used and positioned according to keypress/keydown
I'm not sure if this is right, but I'm using a constructor function to build an object, then inside the main animation loop I'm calling the prototype.draw function for that object to update all variables and redraw the object.
I'm clearing the entire canvas each Frame
Should I be splitting this into more than just a draw function, like Mario.move()?
I've setup a GroundLevel and a JumpLevel variable to create 2 planes of gameplay. The JumpLevel is setup to allow for controlling how high Mario can jump on the fly. The 2 places would allow for the ground to rise like a hill - keeping the point at which Gravity overrules Mario's jumping force at the same distance from the ground.
For clarity sake, everything is separated into different JS files, but would obviously consolidate.
Moving Forward:
Now that I've finished setting up how Mario moves around (I think there are a couple other minor things I might do like mushroom up/down and shooting fireballs). I think I can figure that out, but I'm really lost when it comes to visualizing the following and how HTML5/Canvas can handle this easily:
Scrolling background (I've tried setting up Ground Tiles and using Screen Wrapping, but that seems to cause a lot of uneven issues since I was moving the tiles in the opposite direction. Unfortunately, since I'm trying to account for acceleration, this threw off the count and was causing gaps in the ground. I ditched this idea. Would a DIV beneath the canvas with a large background image be the best solution?
Enemies: Would I create enemies the same way and run a loop for collision detection on every enemy during each frame?
Background Boxes: I'm trying to allow Mario to stand on the boxes in the background, but am unsure how to approach this. I currently have boundaries setup for Mario to stay on the canvas, do I continue to expand these conditions to setup different boundaries based on the boxes? I can see that having several boxes on the screen and doing it this way would get kind of crazy, especially if I would be doing the same hit testing for enemies? I know I'm missing something here....
Level Movement: This is somewhat related. When the Right key is pressed, basically everything in the level needs to move to the left. Would I need to track out all positions of everything that could touch Mario (boxes for him to stand on and enemies for him to collide with) during every animation frame? This seems like it would get kind of inefficient?
Thanks to all! I'll keep this updated with results/solutions :)
Wow, okay. I really like your question because you've obviously done a lot of thinking on this, but partially because of that it's incredibly broad and conversational. You'd do better to find a forum to ask this question.
...That being said, I'm gonna answer the handful of points I'm qualified to, in no particular order. :)
Level Movement: That's a weird (read: inefficient) way to do it. I wouldn't do any calculations based on onscreen positions: track a canonical, camera-agnostic set of coordinates for everything in your level and update the visuals to match. This will stop you from running into weird niggling problems where framerate impacts what you can and can't walk through, or causing slower computers to let Mario run through enemies without being damaged sometimes. Tracking positions this way will incidentally fix a lot of your other problems.
You should absolutely be splitting this into multiple functions. Having movement code and rendering code in the same place is going to screw you, particularly by interacting malignantly with your update/refresh rate. It's going to essentially mean that every time the player does a tricky jump the game does more updates than usual which will make animation/hit detection/etc much less likely to be even.
Enemies: I'd suggest rolling this in with everything else. Do one hit-detection pass against everything, and if you hit something check to see what it was. You could try to optimize this by only checking any given entity against objects within 100 pixels of itself, but if you do it this way you'll need to run separate collision detection events for every enemy. Letting the enemies clip through each other would be computationally cheaper.
Edit: I'd like to clarify about my first point on 'level movement.' Essentially, what you don't want to do is move every entity onscreen every time the camera does, or to store all entity locations as offsets from the camera location (in which case you're still effectively having to move everything, every time the camera moves.)
Your ideal approach is to store your enemy, block, terrain locations with X/Y coordinates that are offset from the absolute top-left of the level (at the very beginning.) In order to render a frame, you'd do essentially this: (pseudocode because we're talking about a hypothetical level format!)
function GetVisible(x,width,level_entities_array) {
for (i = 0; i < count(level_array); i++){
if (level_entities_array[i][x] > x && level_entities_array[i][x] < x+width) {
visible_elements[] = level_entities_array[i][x];
}
}
return visible_elements;
}
Boom, you've got everything that should be inside the window. Now you subtract the camera's x offset from the entity's x location and ZAP, you've got its position on the canvas. Pose as a team, 'cause things just got real.
You'll note that I'm not bothering to cull on the Y axis. This can be rectified by extrapolation, which I'm guessing you can handle because you've made it this far. This will be necessary if you want to do any Mario-style vertical exploration.
Yes, I know my pseudocode looks like C# and JavaScript's unholy lovechild. I'm sorry, that's just how I roll at 11:30 at night. ;)
So, I'm really interested in starting an HTML5/JavaScript project that mimics this type of 2.5D style:
http://superflashbros.net/2009/02/22/blue-rabbits-climate-chaos/
I'm personally trying to stay away from third-party scripts, and just keeping the core of the code pure JavaScript. However, my knowledge of trig isn't the best, so what would be the most appropriate way to tackle this perspective? I'm essentially wanting a game made with 2D sprites, but the ground plane (and perhaps buildings, as in the flash game) is skewed to give it a 3D feel. I'm not wanting to make a "Mode 7" engine (ie. SNES games like Mario Kart), as from my understanding that draws the ground in sections.
Any advice or resources I should look into?
I only ask you to read more about this, and just so you know, I tried to do this one and I achieved a good result but I halted that project because of my new job.
Anyway, you can look into some game engines written in javascript for starters, here is the list of the well known game engines you might find interesting:
1- Three.Js
2- GameQuery (JQuery Plugin)
3- Isogenic engine
You can also check this blog post for more info 66+ Open Source JavaScript Game Engine for Serious Developers
Note:
I know that you like to code your own javascripts and trust me this is a very good habit, However my advice is to try at least one Javascript game engine (if you can try more than one it will be good) to see how different engines work and how they run under the hood, that my friend will inspire you as well as help you to understand these engines to even make your own engine (this is NOT impossible).
I am not saying that you should try as much as you possible (coz that will be obviously pointless) but I am telling you to make small (tiny if possible) games with the engine of choice, I mean to get an idea of how Javascript game engines work in 2D then move to 2.5D or even 3D using WebGL technology.
I checked your reference game out, and understand what you mean by "2.5D". From my understanding, the best way to tackle this problem is to create a pseudo third dimension by transforming the x,y coordinates of objects. You would have a function that does the transformation for you, and here is my best guess of an example.
// This function takes in a x- and y-coordinates of an object corner and returns the
// coordinates of the corresponding back corner of an object.
var transform = function(x,y) {
// The farther the character is from the object, the more skew there would be.
// Here "char" is your globally recognized game character. If it was not in the scope
// of the function you'd have to pass it as a parameter.
var skew = (char.x > x) ? (char.x - x) : (x - char.x);
var newx = (skew * 0.1); // obviously this would be variable depending on your liking
// If the object corner is not on the ground (y == 0) then subtract from it's value,
// otherwise add.
var newy = (y > 0) ? (y - 10) : (y + 10);
};
In my example 10 is the amount of distance units to change the y-coordinate by. This is how it appears your example game does it. Hope my input helps,
Reagan
I'd like to make a rotating object (sphere, box, etc.) using only the canvas. But I can't find a tutorial. Help If you saw somewhere or explain how to do it.
Like this example, only without any effects
Hope you like math. 3D effects can always be achieved on a 2D plane if you are willing to write some code.
Some resources that will probably help:
An Intro to Computer Graphics
and for help with the math,
A Book on Linear Algebra
Ah well it's pretty simple in theory. One way is to just set up a timer and then when it fires, clear the canvas and redraw your sphere, box whatever. To make it faster you can cover over a region of the canvas instead of the whole thing. Also you can get png sprites and move them about on the canvas.
I got into this stuff by trying out the pyjamas canvas wrapper, which means you can code in python and then compile it into js, which to me is a lot friendlier.
http://pyjs.org/examples/gwtcanvas/output/GWTCanvasDemo.html
NB the demo is slightly borken but the example code does compile and run perfectly well if you do a git pull.
I want to create some randomly flying objects in a Unity 3D game. You can imagine them like fireflies. Now there're some tasks to do with them, include:
They usually fly randomly (of course).
They can fly away or fly back in some conditions.
I have to write some Javascript to do these things, but I don't know how to do. Can you help me? Thank you very much!
EDIT: I think I'll need these functions:
function Fly()
{
//control the gameObject to fly randomly
}
function FlyAway()
{
}
function FlyBack()
{
}
I would suggest that you look at the canvas tag, but then it will not work on IE as I don't know if 3D effects will work on excanvas well.
This gives you a drawable surface to do your graphics.
You will probably need to write your own primitive functions for the graphics, but it is very doable.
EDIT: You will need to use object oriented javascript for each of your fireflies, which will help you to move each of them each frame.
If you show your attempt at drawing graphics you can get more help.
As much as I hate condoning the use of Flash, this really sounds like a Flash job.
However, if you insist on using JavaScript, I'd thumb through some Chrome Experiments for 3D examples (w/canvas): http://www.chromeexperiments.com/
I've done an abstraction library that may help here:
DP_PanelManager
The library makes moving objects pretty simple - at the bottom of the page there's an example called "Useless Animation" - it's basically a checkerboard where each square randomly moves, changes size and changes opacity.
Something like that with fewer panels and a little math to do smoother travel (something like this should be easy enough to modify) should get you close.
The component also has simplified functions for collision detection and distance between panels (with bearing - the function will tell you how far apart two panels are AND in which direction they lay).
Hopes this gives you a headstart.
My approach would be
randomly create a x/y equation (may be from a given set, if you don't know how to 100% randomize this).
Decide, randomly if you go by the x or by the y.
decide the number of steps you take on the axis you chose in step 2.
move your element according to the x/y you get from the equation in step 1.
When you finished to move all the steps (number of steps is given in step 3), go back to step 1. In a loop.