Purpose: I want to create a game like this one
Problem: How to make it so that when dragging an item it does not go beyond the borders of the cell? I can do it like this, but you can easily control it from the keyboard, but somehow I’ll find it difficult to work with dragging. In other words, it is required that dragging an item is only possible along a particular path (as in the example of the game above)
Any thoughts? Any options and solutions are welcome. Thanks!
Judging by the example you gave you can do this by placing the walls around the item. Whenever the system detects collision with the walls movement of the item will stop. I have mostly used this functionality with Unity Engine so i am afraid i can't provide you with specific codes.
Check this video: https://www.youtube.com/watch?v=hNV-xEMALr8
I think you will be able to figure this out after watching it.
Related
I'm hoping someone can help or point me in the right direction. I have been doing a lot of research but have not found anything that fits. I would like to make an area where you can drag and drop objects then connect them with arrows to show order.
I would like it so that you can drag and drop unlimited amounts of objects. Then be able to click on a "+" or something to then start to draw an arrow to the next object.
Quick summary for the overall project, I would like to eventually make a flowchart where it can branch off in two directions for decisions but have objects that I can drag out and then draw an arrow to the next object.
Libraries and articles
I found this article that I tried to follow, but I couldn't get it working, but this is a good representation of what I am looking for if it is modified to be done when clicking not just drawing.
I know about jsplumbtoolkit but I do not have that kind of money, also they do a lot more than what I would like to do.
I have seen the react-js-diagrams that seem to be what I want but have not been able to get it to work.
Image of what I would like
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. ;)
I have a canvas in which I need to draw text on in javascript, and then test whether given points overlap the text.
I am wondering if this is possible using the canvas (context.fillText(...)) and then some kind of test (if (overlap(textobject, {x:12, y:10{}) ) or whether I will need to draw the characters in SVG so I have the co-ordinates and can sort it from there?
I'm sure there are libraries out there that have started to pop up for this kind of thing but am having trouble with my google skills today.
I could think of a couple ways around this unless you are needing the text to be drawn to canvas for some type of pixel manipulation...
One way is float the text over the canvas element (position: absolute;) then test a hover event with jQuery. Another way is to create a box around the text in your canvas element, then detect when the mouse is within those bounds.
If you are looking for the most accurate test, svg would be the way to go.
You might also try out a library and see if they have already created this functionality. easel js
Update: Being an open web fan and OOMG HTML5, I had completely ignored Flash. Turns out that it is the best medium for what i'm trying to do. And as actionscript and JS are so similar, the logic was a copy paste job.
Thanks heaps for the answers, it ended up being a huge ask, so I drew my characters in Illustrator, turned on the grid, created an array of where the grid crossed the character and where it didn't - and then turned that into a JS array. I'll publish a link once it's finished.
I'm looking to create a web based "bulletin board" so to speak, where the user can create/delete/drag/drop 'pins'--without being allowed to overlap 'pins.'
Here is a diagram that should help illustrate what I'm trying to create:
'pins' are created, probably upon
double click; they will prompt the user for a label.
'pins' cannot overlap;
(the final shape will be larger, more
oval like.)
'pins' will need to be able to "connect" with other 'pins' with a visual element (i.e. dotted line,) but not all pins will be "connected."
I found GameQuery which allegedly supports bounding box collisions--but it's beyond important that the collisions be detected with ovals, not boxes (I know the above example might suggest otherwise, but that's just a diagram... not a mock up of the intended final design.)
The 'pins' may also vary in size/shape, depending on label size... this should be taken into account as well I imagine, to ensure an approach conducive to all the UX variables.
I've found Quadtree and Collision Detection along with this GameQuery collision demo, but it all sort of looks a little like gibberish. I'm looking to be pointed in the right direction, just so I know that what method I invest my time into, will work for my desired result... rather than busting my balls figuring out Quadtree and GameQuery for example, just to find it they won't work for this project.
...
Also, if any experienced developers are willing to be a mentor for me on this project--I am prepared to offer my extremely refined design experience, for a few "I need help" questions along the way.
How do I adopt an n-sided polygon into the pre-existing bounding box functionality of GameQuery? It doesn't need to be a perfect circle, but at least 8-sided.
I don't think that your problem is really one that relates to jQuery or even Javascript at all. Your problem is, how do I detect when an ellipse overlaps (or does not overlap) another ellipse? It's a math problem, and it's one that has already been asked here.
Be warned that this strikes me as a pretty difficult problem for someone who is new to programming. I'm not at all new to programming and I would see this as challenging, particularly with your other requirements - drag and drop, and so on. You've taken on a pretty advanced problem, and at this point, anything you can do to simplify (such as using bounding boxes) is something I would strongly recommend doing.
It can be difficult to use (webpage) sliders that cover a large range with fine granularity. On the one hand, it is easy to move across the range. On the other hand, it is difficult to locate the exact point one wants, assuming a fine enough granularity.
I was thinking that a magnify effect around the cursor could solve this problem (assuming the problem really exists).
I looked for existing solutions or ideas via google, but couldn't find anything.
Any suggestions here?
I doubt if this is what you're looking for, but... within Mac OSX, holding down the control key and moving the scroll wheel will zoom in and out.
I'm having trouble thinking of a scenario where having so much data that scrolling of this nature would be a problem you'd want to have. In almost all scenarios it makes more sense to chunk up the data or reduce it down in some other way.
About the only thing that makes sense is the seek-bar/scrubber on a video player. If your player is 400px wide with a 360px wide scrubber, but the video is an hour long, the best granularity you'll get is 10 seconds-per-step (with the step-size being 1 pixel).
If that isn't enough granularity, then it's possible you'll need to augment your scrubber with another UI convention - which could be a magnifier - but it could also be other things. Like a "jump to point" text field that would allow to user to entire a time and seek to that exact position.
It sounds like you're going for something (visually) like the OS X dock. This is called a fish-eye effect. There's a jQuery plugin for a fish eye menu which you may be able adapt and merge with a slider to give you the functionality that you're looking for.