I'm building an HTML5 game based on a drag and drop but i'd like to make the object moving automatically, since i'm not using canvas, is there any alternative i can use to the kinetic.js ?
A good alternative to canvas is RaphaelJS.
This library allows you to define objects and animate them on the screen.
It has many features that are useful in game building:
automatic animation of CSS attributes.
built in drag-drop.
mouse and touch (!) event handling.
built in hit-testing.
compatible with older browsers (yes, talking about you internet explorer!)
change elements -- move, rotate, scale
advanced position tracking (transforms)
a proven track record
and if you're artistic, you can use adobe Illustrator art in your game.
you could use JQuery draggable and droppable with some animation to make it automatic ( or use CSS transition)
Related
I am using native HTML5 drag and drop for a simple game application where user needs to drag the images of animals and place in to the correct bays (domestic /wild). When I am dropping (appending) the dragged element to the bay, I want to animate it and make it appear as if the elements are flying and getting dropped in the bay.
I have tried fadeIn(), but it happens after the element has been appended. I need the animation between the dragstart and the drop. Thanks for your help.
For what you are trying to achieve html5 drag'n'drop functionality might not be the best for precise visual experience you are looking.
As default behaviour slightly differs in browsers and most annoying is 'move back animation' once dragged item is dropped.
I have no idea why developers behind Chrome did that stupid "feature" that even delays the dragend event, which is even worse thing..
So you would need to write your own drag'n'drop functionality with very precise visual functionality, but I would not recommend using html5 drag'n'drop for your particular case.
I am looking to create a animation movie, but instead of using Flash I am using HTML5 canvas.
In flash professional, there was a great timeline which allowed to create animations very easily. There were separate timelines for separate movieclips.
Is there any framework/library for working in a timeline like environment in HTML5 canvas?
If not, what is the best way to create animation movies in HTML5 canvas?
Adobe have created a timeline based tool for DOM elements, but sadly it doesn't use the canvas element. It will use html that contains a canvas element though.
Its certainly work a look:
Adobe edge animate
If you come from a Flash background, you should check out Grant Skinner’s EaselJS.
EaselJS: http://www.createjs.com/#!/EaselJS
It’s a canvas drawing library that gets its flavor from the Flash API—you get the stage and displayObjects you’re used to. But it uses javascript and canvas to drive and display your animations.
If you have exsiting Flash assets, you can use his Zoe tool to convert your .swf into spritesheets that canvas can display. I think I read somewhere that Grant Skinner and Adobe collaborated to make Zoe very accurate and stable—but don’t quote me on that!
I guess in theory you could:
Do your future development in the fantastic Flash environment
Use Zoe to convert the .swf into spritesheets
Use a true canvas drawing library like EaselJS or KineticJS to control the sprites. (these libraries love spritesheets!)
We are in the research phase of a new project which will be used in the advertising arena. Users create a bunch of items that will play in different regions on the screen and can then swap out animations (images/texts etc).
We are pushing for an HTML5 solution which will be responsible for the rendering but a new proposal is to just use SVG (and SMIL).
I know you can embed SVG content in HTML5 pages and there are numerous links comparing the canvas and SVG.
What I need to know is what are the pros and cons of going for a solution which is based on HTML5 compared with a solution that is based solely on SVG? Also for the long term plans of the project, I can see HTML5 as allowing so much more.
Also I am not sure what tooling support is available for users using SVG. Most of items must be templatable (changing text/images), is this at all possible?
TIA
JD
I've recently had an opportunity to try Raphaël, an SVG-based solution, and Flot, an canvas-based solution. Both provide emulation on browsers that don't support the primary format: Raphaël uses VML on IE, and Flot uses excanvas.
Both SVG and canvas have advantages and disadvantages. Both can draw shapes, paths, and embed images, but canvas can do pixel-level manipulation and can draw a lot more sprites quickly, which is why it's becoming popular for HTML5 games. SVG has more powerful paths, although you'll have to learn the syntax.
SVG has another really interesting advantage: elements on a chart are DOM nodes, so it can use browser mouse and click events as well as add, remove, or change an individual node without redrawing the whole chart. Doing the same thing on a canvas involves manually keeping track of the locations of every visual element and redrawing the whole canvas when stuff moves. (Canvas does let you do double buffering and caching stuff sop it is possible to redraw it quickly, but the logic of keeping track of where everything is is still on you.)
For that reason, I think SVG is a better choice for interactive graphs and charts, while canvas is more appropriate for advanced graphics. In either case, cross-platform compatibility is a concern and a abstraction layer is indicated.
SVG is potentially more search-engine friendly and accessible than HTML5 <canvas>, in that SVG elements and text can be (potentially -- not sure if they actually do!) indexed and read out to a screenreader, user whilst <canvas> is initially just a bitmap and would need additional content to be created if one of these ads was to be presented as part of a web page. OTOH, if it's a game-like tool that's not for content creation then perhaps that's not an issue ... perhaps give more details?
I'm looking into writing my first HTML5 game, and everything I see talks about Canvas, and then goes on to talk about things like events, game loops, etc.
I'm planning on making a board game, where all the images are laid out on a grid. There doesn't need to be a game loop happening, because everything will just sit there just how it is until the user interacts with the game. And because the images for the board and pieces are laid out on a grid, I could just as easily (as far as I can tell) use tags, laid out with standard CSS, instead of drawing it all into a canvas element.
So is there a reason I should bother with canvas here? Does it make sense to just use "normal webpage" HTML elements to create my game interface?
Canvas is great for making games where things aren't a square, such as isometric or hexagon tile game, or an action based game where the player's sprite needs a wide range of movement, or something like Angry Birds where nothing is really grid based. For other things, it's probably overkill, though it might allow for quicker image processing and effects, due to being hardware accelerated in many modern browsers.
For what you're talking about, a grid based board game, it's perfectly fine to use normal HTML elements. If you're not going to need any fancy graphics effects, then you can safely ignore the canvas tag.
Side note: you could use canvas to make dynamic dice roll animations. It'd spice things up a bit, and give dice rolls an added 'suspense' effect. Or you could use 6 (or 12) animated gifs, just as easily.
There is a significant difference between html5 / css3 and a javascripted canvas tag.
HTML5 / CSS3
In this case you are just using the updated tags to present content, modified by some nifty css properties. You would then use "standard" js (and js frameworks) to control game logic and define user interactions and animations (or use CSS3 transitions to control any animation).
As you know, to create a couple rectangles:
div#red{
background-color:red;
height:50px;
width:50px;
position:relative;
}
div#blue{
background-color:blue;
height:50px;
width:50px;
position:relative;
}
<div id="red"></div>
<div id="blue"></div>
If you wanted to make this (unnecessarily) HTML5, they could be sections instead of divs. CSS3 definitely gives you a lot of nice new presentation features, specifically things like box-shadow.
Canvas
This is a fundamentally different way of working - much closer to something like Flash / Actionscript where content and presentation are defined programmatically, via javascript. For example - this is how you would create a similar couple of rectangles:
var canvas = document.getElementById("canvas");
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
In a similar way, game logic and user interactions are defined. The flexibility and power of this later example cannot be overstated.
I say all of this simply to illustrate the fundamental difference in these two technologies. Now, IF you can do everything you want to do with markup, css and javascript behaviors, then by all means, do so. There is nothing wrong with this.
Working with the canvas tag, on the other hand, may give you increased flexibility and control over your project, allowing, for example, much more complicated and nuanced animations and interactions.
Finally, there are inherent issues with both of these routes, specifically, browser support. If you are targeting only the newest browsers, then I'm not sure it matters, but go back a couple generations and support drops off swiftly.
Then SVG is the right choice for you. Canvas is procedural, SVG is declarative and scalable. http://raphaeljs.com is a great framework.
If you want to create a game without further improvements you can do it without canvas. But using canvas gives you a lot of possibilities. Here are some of them:
All sprites appear in canvas, not in DOM. Adding/removing elements in DOM is quite difficult for browser; especially if you are going to use CSS-animation (for mobile platform). Animation on canvas is much lighter. It comes even more with "requestAnimationFrame" being developed now. It will greatly improve rendering speed.
You can apply different styles on canvas sprites and even change them dynamically. Canvas supports gradients. You can dynamically create sprites using "crop" operation on canvas area.
Scaling of all sprites on canvas can be performed by only one "scale" function. It can be really difficult to scale a game made of large amount of HMTL-tags.
It's easy to implement layer-based game field using canvas. It allows to control game elements with ease.
In our Enterra HTML5Poker - http://demo.enterra-poker.com/html5/index.html we use both canvas and HTML-tags to organize game field. We use common HTML-tags to organize lists, popup windows and interactive elements; and canvas is used to display game table, cards, avatars and other elements.
Using HTML5+JS as base technology for game development allows simple application porting to different mobile platforms. For example iPhone - http://itunes.apple.com/us/app/enterra-poker/id492214596, Android, Windows Phone and others.
I'm new to html5 and have been playing around with the canvas. I'm wondering when the canvas would really be necessary/useful? i.e. when is it meant to be used?
If i need to do simple animation, like move tags around, do i really need a canvas or is it better/easier to just use jquery/js?
With help of canvas you can create 2D graphic applications, animations, simple transformation of images (like rotating them), GUI etc. Some examples:
Asteroids game
jigsaw puzzle
About GUI, unfortunately I can't load a site, no idea why... it was called iWidgets.com, the only thing I've found is a screenshot. You can see blue pipeline there, they bound elements. It was done with help of canvas; while moving elements, pipelines also were redrawing; when you change active element all its connections changes color to yellow (so you see dependencies). Nice project, I hope it is not accessible just for a while...
Good article about how to use it is here
From "An insight into the HTML5 Canvas Element":
The canvas element is interesting and
worthy of focus because it enables,
for the first time, direct drawing of
graphics within a browser without the
use for an external plugin like Flash
or Java. The beauty of canvas is that
it’s controlled entirely via simple
JavaScript code, meaning it builds on
the powerful functionality JavaScript
already provides and doesn’t require a
crazy learning curve to use.
Choosing to experiment with canvas
over other new elements was simply
down to it’s functionality as a
graphics platform, which inherently
makes it a potentially interesting and
rich platform to play with. It was
decided that pushing the flexible
canvas element would produce the most
interesting results that we can use in
the application.
Another deciding factor for choosing
canvas was to test the animation
capabilities and the possibility of it
being a potential Flash replacement.
Now Flash obviously has features that
canvas could never emulate, however
it’s an exciting concept nonetheless
to see exactly what could be achieved
with canvas that would normally be
done by reaching for Flash.
read that article to get more useful information
PS. If your animation is about tags moving (like parts of your page), then canvas does not fit. Canvas is for graphic rendering. So in that case you will use jquery or other JS libraries.
Here's the best practices for deciding when to use CSS3 Transitions / Animations or Canvas. Keep in mind that if you're using jQuery, under the covers they will be using CSS3 transitions or animations when possible.
CSS3 Translations / Animations - use these if you're animating DOM element styles, such as position and size
Canvas animations - use canvas animations if you're animating something more complex, like if you're creating an online game or building a physics simulator. If you're animating 3-d models, you'll definitely want to use canvas so that you can leverage WebGL
Canvas gives you access to the pixel level of the graphics. If you wanted to do a checkerboard transition you could do that with a script in canvas but not in jquery.
For a few examples of what is possible (already been done) see http://www.netzgesta.de/transm/