In ammo.js I am trying to make a creative type game - everything works as expected but when objects collide they do not rotate.
Code can be found here
http://blockhaven.uk.is/dev/BHJSP/
The example can be played if you just follow instructions from here
http://blockhaven.uk.is/dev
Not sure what the problem is - even if the rendering engine does not show rotation the blocks should still rotate when dropped on the corner of another right?
To be clear ammo.js is a port of Bullet Physics.
To help anyone else I though I should answer my own question.
Make sure to set your mass to a non zero value! else everything will mess up.
The mass is defined here :
new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, blockShape, localInertia)
Hope this helps :D
Related
EDIT: Decided to add actual sprites and animations instead of using fillRects.
Currently drawing all this on a canvas.
I have an update function and a draw function.
Within the update function, i loop through all the people and update their positions slightly. Then I call the draw function which renders it onto the canvas.
Currently all the do is slide around the bounds of the map but I think it'll add a lot more polish to the game if the little guys have a small walking animation.
The people are all drawn with a fillRect() function. I figured a small animation where the people rotate side to side when moving would be a nice effect. However, i'm not sure how to go about this as well as best practices.
Do you guys have any idea on how to achieve this effect? It seems like if I want to do what im looking for, i would need to then keep track of more states within the people. eg. isTiltedLeft, isTiltedRight, tiltDuration, etc etc. This seems a bit complicated(?) but maybe this is the only way.
Since you don't have any specific code questions, you're generally on the right path. There's a lot of different states to manage, and you'll need to track each of them. If things seem complex, they sure can be. People spend lots of money to run games nicely. A lot of code needs to run very fast in order to make these experiences.
Common things I've found useful to know:
Use a sin wave to add a bounce to your animation.
Use Math.Atan2 to find the angle between two points
Understand how to convert between Radians and Degrees
Use Composition over inheritance as much as possible.
I'm always happy to chat about game dev, feel free to look up my contact info and reach out. Happy Coding!
I'm still pretty new to coding and web development and am trying to recreate this effect but with a circle.
Original:
https://codepen.io/sarahwfox/pen/pNrYGb
So I changed the word sparkle - for example:
var sparkles=100;
to circle:
var circle=100
and that changed the shape but for some reason, it won't fall like before? Is this the correct way to go about this? I did change it throughout the script but I can't get it to fall like the other one.
https://codepen.io/kyannashanice/pen/YzQPoGe
I've not written much of my own javascript but would really like to incorporate this effect into my project. If someone would be able to help me or give me some resources that might help I would really appreciate it but realize that this may be a lot to ask.
I’m not clear what the circle effect you were hoping to see was but no, this isn’t at all the correct way, sorry!
All you really did by changing sparkles to circle the first time was effectively set the number of falling sparkles to zero, which is why they stopped falling.
There’s not much point changing variable names because they are really just labels. So for instance, if you changed every use of sparkles to circle you’re only really changing a label, not changing what the code does.
If you’re only just learning JavaScript it’s probably going to be beyond your capabilities trying to change the effect to something specific, but you could try playing with other values and seeing what happens.
Hope it helps! I think tinkering with other peoples scripts like this is a great way to start to understand coding.
UPDATE
The part of the code that animates the sparkles starts from line 140 - try tweaking some of that code.
For example on line 143, I changed it to stary[i]+=1+Math.random()*1; to make the sparkles drift down more slowly
I am really new to coding, and I might have picked off a project that's bigger than I can chew....
I am trying to code an "avoider" game where the player moves the mouse around the screen in order to avoid the enemies following, or coming at the player. If the enemies touch the player-- game over.
So far, all the tutorials I've found that don't involve using Unity or some other game building software only have the enemies falling from the top of the screen-- not actually following the player around.
Is something like this even possible just using basic HTML5 and JS? Does anyone have any tips on where to start with this or any good tutorials or example code?
Thank you!
Yeah, this is possible in vanilla js. You may want to break down the problem. First you need to track the player's location. All you need are the x and y coordinates. Then you just increase the movement of the enemy towards those coordinates.
This tutorial does the opposite. The enemy avoids. It's also based on the mouse, but it should lead you in the right direction if you can't figure it out.
https://code.tutsplus.com/articles/html5-avoider-game-tutorial-multiple-moving-enemies--active-9956
Im looking to create an ellipse with a feathered or soft edge, as if it has been drawn with a spray can. I cant get my head around it...?? :-i
Any Help will be truly appreciated.
You have to break this down further. Pretend you have a friend who has never seen anything drawn with a spray can, so they have no idea what that looks like. Your goal is to give your friend a piece of paper, a pencil, and a list of steps they can follow to create the effect even though they've never seen it before.
Write down a series of steps (in English, not in code) that your friend could follow using the pen and paper. Remember that your friend has never seen the effect before, so you have to be as specific as possible. Try to break steps down into smaller sub-steps whenever possible. Maybe try watching videos of the effect in slow motion to figure out exactly what's going on.
When you have the list of steps written down, that's an algorithm that you can think about implementing with code.
Even though this doesn't feel like programming, this process of breaking your main goal down into several smaller steps is at the core of programming (especially creative coding).
That being said, I can help you get started by offering several approaches you might want to play with.
Just use an image stamp. Draw the effect beforehand and then just draw that image to the canvas, optionally randomly rotating and coloring it.
Or draw a series of circles, maybe getting more transparent as they get further from the center.
Or draw a random dot within a random range at a random angle. Do this several times per frame.
I am creating a pacman game in javascript to learn the language, and the most elements of it are done nicely except of.... the 4 ghosts AI. Right now I am using a pretty basic approach (like searching for x and y and try to get closer to pacman, if the ghosts hits a wall or other ghost e tries to unstuck himself by going into a random direction until it hits another wall or ghost). The thing is, this approach is just not good at all, most of the times ghosts get stuck between them for some time, or go to very erratic directions.
What I want to ask is, what could be an approach for constructing this AI considering this is javascript? I am not asking for already done code here, just some ideas to get me unstuck on this.
PS: I've thought of graphs and Disjktra et all, but, considering that the game is in a matrix and calculating 4 graphs + path every 250ms can be a lot costy....
This is a very thorough introduction into specifically Pac-Man AI. It's very well written and I thoroughly recommend it.
For general pathfinding have a look at A*.