I am new to Cocos2dx, and I am playing with the awesome particle system in my game. However, I couldnt able to design the best effect in my mind.
What I would like to see is something like in this video.
I think the main difference is that I cannot configure to let all the particles appear at once and disappear at the same time afterward. The particle generation time seems to be random.
So my questions will be: Is there any workarounds that I can configure the effect like that link in Cocos2dx? Or is there any other suggested ways for me to stick with?
I have another solution in my mind which is use sprite animation instead. But then it will lose the flexibility. I love a configuration approach similar as particle system that can easily create different visual effect by only changing parameters.
Any help will be appreciated!
Thanks!
You can download Particle Editor for Cocos2dx and V-play from below link:-
http://games.v-play.net/particleeditor/
also you can show a demo here for various particle effects:-
https://www.youtube.com/watch?v=6wUrf_veEvU
I am trying to create an effect like what I have shown in the video below:
http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be
this effect was created in Flash, but I wanted to replicate it (to as much as possible) in HTML5 and CSS3.
I have not done any thing like this before. So wanted to see if someone can help me suggested how I can do it.
Thanks
Zeeshan
Well Spider is kinda right. There are tons of canvas demos describing such particle effects:
http://codepen.io/soulwire/pen/Ffvlo (found here: >)http://davidwalsh.name/canvas-demos)
http://gwtcanvasdemo.appspot.com/
-https://developer.cdn.mozilla.net/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f696bea7b2ff62c0188/fluid_1339407870_demo_package/index.html (found in mozilla labs: https://developer.mozilla.org/en-US/demos/detail/fluid)
etc. (just do a quick google Search).
Doing this with CSS is not possible since you can't track the exact position of the mouse can't create this dependend effect, etc.... and Canvas is HTML5.
I want similar functionality for drawing image with smooth curves in html canvas. Can somebody tel me how to get such smooth curves?
I used Smooth.js for a projet and I was pretty convinced by it.
See some examples here.
Highly recommend one of the bests in this category:
http://paperjs.org/examples/path-simplification/
http://d3js.org/
I have an SVG logo made up predominatly of elements. I want to animate this, or more specifically drop it into a "gravity world". I was hoping to use Box2D (web port).
I'm a noob to Box2D and Canvas really, but I've got as far as converting my SVG into HTML5 canvas using canvg and I'm now reading through the getting started tutorials for Box2dWeb and I can see how to create a world with gravity, but I can't find any examples of walking an existing SVG or Canvas and simply adding the shapes to that world.
It looks like you need to use the Box2D drawing methods. Can anyone point me at a simple example that takes an existing set of shapes (SVG or on Canvas) and simply drops them onto a Box2DWeb gravity world so they simply collapse to the bottom, much like nearly all the existing Box2D demos and tutorials?
Note that with CanVG I'm not adding the shapes to Canvas myself, it is creating the Canvas for me from the SVG.
You can add whatever you want on top of box2d. If you wanted to draw dancing elephants instead of a box shape, that's up to you. Otherwise games would look pretty boring.
Nothing prevents you from using either SVG, canvas, WebGL or even HTML with box2d, you don't need to use the box2d drawing methods if you don't want to.
See this blogpost (and code) for using box2d together with raphaël (SVG). Dmitry Baranovskiy (the author of Raphaël) has also shown some demos of a custom box2d port/wrapper called newton.js. It's not yet released AFAIK, but it promises a simpler and more javascript-like API.
Please check out these links,
1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE
Regarding the html elements to apply box2d effects i also can't find any other links expect the one you mentioned in your answer.
I had been hoping that with a bounty somebody would be able to illustrate for me the "hello world" of 'gravity demos' that could animate some arbitrary shapes. Articles and links I've been shown (and found) so far are much more complicated than I'm looking for.
Whilst I hate to answer my own question, I'd just like to set the bar. This is EXACTLY what I'm looking for;
http://mrdoob.com/projects/chromeexperiments/google-gravity/
This script for this code is licensed under GPL3 I understand and I've tried it out successfully on my site. In fact, it just causes all the DIVs on my page to drop, so it's just the ticket, and I could use it.
It's not however, a simple script. I'd have preferred a simple stand-alone sample if it were possible. Failing that, hopefully this answer will help anyone else looking for something similar.
[Updated]
I've also since found this plugin, although it's a little CPU intensive and crashed Chrome for me.
http://tinybigideas.com/plugins/jquery-gravity/
I'd still be delighted to award the bounty for any better answers.
I'm pretty sure that this is what you want, it uses Gravity Script (the file's so large because it includes jQuery and Box2d.js):
Demo: http://jsfiddle.net/SO_AMK/Cf7jn/
JavaScript: None! It's in it's default configuration.
I don't really know 'Box2d', and I'm not sure if this is what you mean but just to clarify if it comes to where you need it, in HTML5, it works like having the background or style to a <table>, Which if you don't know is just about the same thing as a table in MS Word.
Sample Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
More Color & Style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
And If Allowed in 'Box2d' add some javascript:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Well, Dmitry's newton.js is not yet public. But like #cirrus, I needed something similar. So I've gone ahead and created my own newton.js. It is not well tested, but has API similar to what I can see in Dmitry's video + my own requirement (I wanted to create a game engine on top of Raphael as a renderer)
Please fork at - https://github.com/dbose/newton.js
#cirrus, it also has a simple test.html, which takes a simple Raphael element and add it to the Box2D "world"
Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)
In my web application I want the user to be able to draw some rectangles on an image, also change the size of the rectangles and drag and drop them. after that I have to get coordinates of rectangles and send them to server's database
Is it better to create a canvas on a photo or load the image in canvas ?
I don't write any code yet because I have no idea how to do this.
Any ideas,suggestions,links,libraries ?
As the comment said canvas is a good bet for this, but you'd need to do a fair bit of coding to get it working.
I actually have a tutorial on making Canvas interactive by drawing rectangles and moving them around. It should give you a good start on this project.
There are also a few libraries, such as fabricJS, but that might be hard to get the coordinates out of without digging into the library.