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.
Related
Is it possible to add animation to Microsoft Access? What I am envisioning is that someone clicks a button on a form and an animation appears and then goes away. Kind of like how when Mario jumps and hits a block, a coin appears and disappears. I know its a very general question, but I couldn't find much online regarding this.
You can move a timer event or similar to adjust the top/left position of a control/picture.
But you wouldn't, as Access (VBA) is single-threaded meaning that while such animation goes on, nothing else will happen, effectively freezing your application. That is really annoying for the user, and that is one of the reasons you meet very little code in this area.
Yes, this is possible. You would basically be drawing and redrawing sprites at specific screen coordinates. It's horrendous in Access, it looks clunky and will kill your app. The reason you can't find much about it online is because it's a very bad idea to try to incorporate it into a database.
Even if you took a shortcut and had multiple GIFs made up (think of an old-school flip book animation), you still have to draw and redraw a bunch of controls. I suppose if you really wanted it you could add it, but I still think it'll drag and look clunky.
The idea is that there'll be a 3D animation looping (an idle character, probably rotating) and it will change to another animation when someone hovers the cursor over it (say, the character getting nervous), and another animation when clicked (say, the character startling). But if I use the old way of just changing the video it will look kind of weird because it will change drastically most of the time, how do I make this transition look good?
I'm kind of new to HTML so maybe it's easier than what I think, but I really have no idea of how to achieve this. Thank you in advance for your answers! :)
Two options, make it an actual 3d model (hard) or control the flow of the video and wait for the video to finish before showing the next part/animation. Going down that route would require you to use HTML5 video tags for the video and you would have to look into the javascript API it exposes to control it. It's not terribly hard, but too broad an interface to cover in this answer.
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)
I'm new with html5 and I'm trying to go through with drag and drop functionality.
This is the scenario: two different divs (or canvas) side by side.
What I want to do: drag the first div (or canvas) and drop on the second div.
Which result I expect: The first div content is now on the second div position and the second div content is on the first div position. Like a normal switch.
I'm pretty sure that is possible, but the only think I've done until now, was to append the first div into the second div.
Yes, of course it is possible, but the answer depends a bit on what the purpose is... If you want to learn how drag and drop works in HTML5, then write your own implementation based on the tutorial you mentioned. But if you want to build something for production within reasonable time, use a library - there are lots. Which one to use also depends on the platform you're targeting. If you're targeting mobile, you need touch support, and you need to consider multi-touch effects in your implementation - it's not just mouse clicks and drags anymore, but potentially lots of fingers simultaneously!
A nice demo using hammer.js can be found here: http://riagora.com/mobile/hammer/index2.html. Drag and Drop works both with mouse and touch, but you need a touch screen for zooming (by pinching) and rotation of images.
Another demo, a puzzle using scriptaculous, which does almost what you ask for. However, the current version, 1.9.0, is from December 23, 2010, so it doesn't seem to be actively developed anymore.
I'm implementing a HTML5 game using canvas. Now I'm thinking about making all text overlays like tooltips, speechbubbles, infowindows and so on using HTML elements with position absolute over the canvas. So I can use many effects and transitions CSS3 offers.
But I'm not sure about performance. These overlays have to be added and removed frecuently (is something MMORPG like, so there will be a lot of speechbubbles and so on).
There are probably 2 questions regarding performance:
DOM traversal to add/remove. Maybe a cache can help?
HTML and CSS3 itself.
The other option is to manage these elements in the canvas itself, drawing them each frame. But maybe I have then again a performance penalty, because of the extra code, timeouts and stuff I would have to add, to achieve similar effects like in CSS3. And traversal of some data structure would be needed anyways.
Any advices, opinions, experiences?
Thanks in advance.
Consider using only one of the mentioned two technology. May be you can release that application in mobile or tablet. I think on these devices would be issues with handling both the same time. And another thing: if you stay in canvas there would be no worries about compatibility. Its not a techy but a thought-provoking answer.
The single best reason for using the DOM for UI elements in HTML5 games is event handling.
If you draw everything on canvas you will need to write your own logic to handle clicks and decide what has been clicked on, which can soon become very complex, expecialy if you have multiple layers of interface.
With DOM elements (especially when using a library like jQuery) this is trivial, and you can create a rich and interactive UI with minimal effort.
The only downside I can think of is that you may encounter browser inconsistencies, especially if using CSS3, but again jQuery will help with this.
I suppose another downside is that once you go down the DOM route, your game is always going to be a browser game, whereas if it was 100% canvas, there would always be the possibility of porting the code to another language and making it native, but I guess that would only be a downside for some people.
One way to approach this is to use a "dynamic" image map behind your canvas object. Then you can use the dom as required. Note you will need to pass the clicks on the canvas through to the image map.