I am working on a rpg game development. My concern is- I don't want to use any image. I want to draw everything (seriously, everything..) using canvas drawing methods (lineto, bezierCurveTo, quadraticCurveTo etc.)
So, is there anything wrong or any performance overheads in it compared to using images in game development?
Please, I need guidance it this field, because this is my first game... :)
Thanks!
Related
I am planning on creating a real-time multiplayer platformer game in HTML5 using javascript. After searching about 4 hours on the webs, i couldn't find an up-to-date answer on the eternal question: rendering my game with DOM will be faster than rendering it inside a canvas? The game will be the whole document. 2/4 players will be jumping on the map and will shoot at each other, bombs will explode. So? What will it be. I remember I made 2 years ago a draw application with DOM and it worked kinda smoothly, but i guess canvas speed is better nowadays? Thank you guys.
P.S. I think of using Dart too.
I use canvas, and would say to do the same since it's a direct drawing mode. However, you should absolutely make sure it is forced into hardware acceleration wherever possible. You do this by setting the style of the <canvas> element into transform:translateZ(0); (or different browser interpretations of that, e.g. -webkit-transform:translateZ(0);). Manipulating the DOM can be slow now that canvas is closer and closer to native code, especially with simple methods to get the most performance out of it.
My games seem to do pretty well on different platforms with this - not universally well on every single platform (older Android OSes lag, but their JS & browser rendering engines weren't that fast to begin with), but quite well on many platforms.
Canvas is the best choice for the type of game you are describing, but some DOM elements are still very useful even using canvas, for example, asking the player's name, or creating a menú or profile section inside the game. You can render a div with absolute position on top of your canvas when you need to display DOM elements, and do all the "game stuff" like drawing and animate sprites in the canvas element.
The reason why Canvas is the best choice is simple. I'm pretty sure that you can't or it would be really hard to do things like this without the canvas element:
http://galloman.github.io/ss2d/samples/skeletons2.html
More at: http://ss2d.wordpress.com/support/
Coming from the backbone side of web development we are trying to find a solution for a request to add visual and sound effects to our task management web application.
For starters - we are looking for a way to create an exploding stars effect like you see in games.
Can this be done with HTML5 canvas?
Should we use flash?
Any ideas how to start?
By now, just about anything Flash can do visually can be done by the HTML5 canvas on modern browsers.
For a 'star burst' visual effect, it sounds like a simple matter of creating a random array of objects that move away in random pre-set directions every time the canvas updates.
Example: http://jsfiddle.net/amDAW/ (click on the canvas to create a starburst)
As for sounds, this isn't handled in the canvas, but rather either the Audio tag or the fairly new WebAudio API. If you go with the former (more browser support), your biggest concern will be with resource preloading, but there are some helper libraries that can abstract this away (shameless advertising: https://github.com/jsweeneydev/ResourceLoader).
I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.
This question is about understanding how a game like temple run might be implemented in HTML with/without using the canvas. I have a vague idea about how swipeLeft, swipeRight
etc. might be implemented. But I am not able to gauge how the environments might be developed.
I am not asking for any help with the code here .I just want to have your opinions about implementing the environment. Is it just one huge sprite? If so, how will the user see random environments in the game each time he spawns?
It is not a single sprite. Assuming we're talking about the same Temple Run, it's a 3D game, probably using OpenGL. The fog effect means the game doesn't have to render objects in the distance. If you want to make a similar game, I suggest you look at one of the fine 3D game platforms available for Android and/or iOS.
You can do 3D games in HTML, and there are libraries that help, but unless you're making a website and not a mobile app, then it's better to do it native.
Kind of a dilemma here. I am making a mobile version of a website, that has some interactive things more specifically I have this object in 3D that you can spin, I was using papervision in Flash but now I need to do this differently since there is no flash in mobile and I feel I am on thin ice.
I was thinking of exporting a 360 degree spin # 30 FPS using a PNG sequence with alpha channel, and then simply stiching them together into a sprite, then using this as a background in CSS and using background-position to then "simulate" an animation.
That or simply switch source image very rapidly, or somehow using "canvas" maybe, the thing is I am not sure if this will produce completely subpar performance? I mean switching the background-position or image source file # 30 FPS is that even possible? Would it be smooth, or is this simply something that is not feasible todo yet? Keep in mind it's just one single 3D object that needs to spin based on user input, not any other interactive elements.
So is sprite the way togo or canvas or something cool I havent even heard of? Thanks everyone in advance!
If I was making a mobile version of a website, I would strip it of most of the graphics and definitely of all the animated gifs, flash, etc. -- people using mobile phones for browsing the web are usually not after the multimedia experience -- they just need some information quickly and use a suboptimal device with poor bandwidth and even worse display and performance to get it. Don't make it even harder for them.
On the other hand, I found that using a background image with all the frames of animation in it, and manipulating the background-position from javascript is a fine way of making small animated sprites, for example for a simple javascript game for mobile phones :)