I'm working on a card game project, and one of the issues I'm facing right now is animations. I just can't figure out how to animate the card properly so that both users see it animate at the same time, and for the right position. And by that I mean, when your opponent draws a card, you see an animation of a card from the opponent's deck into his hand while for the opponent, the animation is from his deck into his hand.
I've tried using jQuery animations, and I could only do one part of the animation - couldn't represent the opponent's animations.
I've also tried some of Atmosphere's packages, but they didn't work the way I wanted.
The cards collection from which I'm trying to animate has a place field for the card (hand, deck, drop..etc). And each element in the HTML depends on the place field to get the cards from, so for example:
Template.playerHand.cards = () ->
Cards.find {userId: Meteor.userId(), place: "hand"}
and the HTML is:
<ul class="holder">
{{#each cards}}
<li><img src="{{card.image}}" /></li>
{{/each}}
</ul>
would it be possible to animate the card depending on the previous place?
like if a card was in the deck, then it moved to hand, a specific animation will run. Same for from hand to deck.
Thanks.
It's hard to diagnose this with so little code to go by, but I'd guess that something like this is happening:
Player A draws a card:
Player A sees an animation almost instantly. This is because whatever code is called when a card is drawn (e.g., an update in the Cards collection) is simulated client-side for Player A, which triggers the animation immediately before the server even knows that the card has been drawn.
Player B sees an animation after a few seconds. This is because Player B needs to wait for the card-drawing code (the update in the Cards collection) to sync from Player A's browser to the server, and then back down from the server to Player B's browser.
If this is the reason for the variation in animation times, then the solution is to prevent Player A's browser from simulating the database update that triggers the animation. In other words, the first machine to learn of the card-drawing should be the server, which syncs that news down to both players at roughly the same time. There are two ways to accomplish this:
Use this.isSumulation within the function that updates the database when a card is drawn. Basically, keep the database-updating code within a block like if (!this.isSimulation) so that it executes only on the server.
Have the drawing of the card be achieved via a Meteor method. So Player A would draw a card, which causes Meteor.call("drawCard") which would then cause the drawCard method to execute on the server. (The userId is sent along within this). Define the drawCard method in a file in the /server folder or within a Meteor.isServer block so that the clients can't see its code, which therefore means they can't simulate it.
Either way, the database update happens on the server first, then gets synced down to all clients more or less at the same time, which should trigger the animations at about the same time.
If the reason that the animations are happening at different times is because your clients are at dramatically different speed connections (i.e. one on broadband and one on a cellphone) then a whole other set of compensation techniques are needed . . . but since this was posed as a Meteor question I'm assuming your problem is Meteor-related and not a general networking issue. If I'm wrong feel free to edit your question and I or the community can post some lag-compensation techniques for Meteor.
Related
I am currently busy with an assignment (using P5.JS) that involves using the webcam as user input to trigger sounds. This works by creating a grid across the camera input and using color differencing to detect whether there is movement in a specific grid block. If there is movement, the grid block is "activated", which triggers something visual on screen. I have linked each grid block to a monosynth note, and when the grid block is activated, the corresponding monosynth note plays. However, when I run it, I get a scratchy and unpleasant sound, which I assume is because monosynth is trying to play many different notes simultaneously. Is there a way I can limit it only to playing one note at a time?
https://p5js.org/reference/#/p5.MonoSynth
In the above link, I see there is a "duration" argument for the .play method function. Is there a way that I can wait for that duration to finish before allowing it to play another note? Or perhaps a method function that checks whether the Monosynth is currently playing something or not, and then use that in an if statement before using the .play method.
Any advice would be appreciated.
PS: for plagiarism reasons, I can't share any of my code online.
The MonoSynth example on the documentation page does not exhibit a "scratchy and unpleasant sound" even if you hit the tap to play button as quickly as you possibly can.
Since the monosynth literally is a single oscillator and a single envelope, there is no way it could play multiple sounds at once (and start clipping).
Since we can't see your code, I have to rely on my crystal ball with this guess: Are you possibly instantiating a new monosynth whenever you start playing a note instead of telling a single monosynth to change up its pitch? That would explain it.
I am wondering about how async actions like animations work when you do actions like delete an item, and so came up with this sort of thought process and would like feedback to see if it makes sense from an industry best practice perspective.
There are two layers:
The reactive layer.
The rendering layer.
The reactive layer occurs instantly and can be done with traditional event dispatching.
This is where you create and delete data and it all happens instantaneously.
The state machine gets notified of these instant reactive changes.
Then the state machine "transitions". This process occurs over a period of time, assuming there are some async things that occur (animations, network requests, etc.). This is what people mean when they say "action queue".
Then the rendering layer pics up stuff off the action queue and renders it. This way there is sort of a delayed reaction to the underlying instant reactive layer.
My question is if the reactive layer needs to handle async as well. For example, deleting something.
Say an item is deleted, and you want to animate it out. There are a few ways to do this:
Queue up a delete action, then animate it out first. When animation is complete, then do the actual delete. If animation is interrupted (cancel the delete), then the delete is never performed.
Delete the item instantly (reactive layer). The animation layer keeps a reference to the item around, so can still do its animation even though from the global place it is deleted. If the animation is cancelled, then you would have to do an "undo" sort of thing which is more complex.
If (1) is the way to go, then there is no reactive layer, and everything is implemented with a sort of action queue in mind. This makes it harder to make reusable code because everything is tied to the action-queue idea.
If (2) is the way to go, then there are two copies of the data, the global copy, and the local copy, which is kept in sync asynchronously. This makes it easier to have reusable code but makes it more complicated to reason about.
Wondering if any of this makes sense, and if any of these approaches is better practice in the industry (or if there is an alternative I didn't address that makes more sense).
Put another way, there are two main ways to do it:
Eager: Delete it now, okay everyone we've deleted it, time to come back inside. And wait for everything to trinkle back in to call it "done".
Cautious: Announce "we are going to delete it", then wait til everything is done and comes back inside to actually do the delete.
Wondering how games and apps and such handle this sort of thing.
Update
After thinking about it a different way, maybe it would be more like the swaying of kelp in the ocean:
https://www.youtube.com/watch?v=gIeLCzR8EgA
By that I mean, there is a base layer that is immediate (does the create/delete), then there are some intermediate layers with copies of all the transactions that occurred (create/delete), that the rendering layer uses to animate create/delete. So the original data is always in sync, but the rendering layer uses a sort of older version of the data with a chain of all the changes taking place.
reactive layer -> transaction layer -> rendering layer.
Another option is flagging as delete, then only after animations are complete actually do the delete, but that seems hacky.
Update
Another version:
Reactive version
Always has the latest data. (a)
Rendering version
Has the last data (b), plus a chain of changes leading to (a).
As rendering completes, it applies the changes to (b), so eventually it is like (a).
from my experiece as Unity Game Developer the right decision is in the middle, as for the physics in game engine are approximated because the sensation of a things semi-perfect is pretty like a perfect one.
The explanation is because the more realistic and real-life like is your goal the more you need resources, not only CPU and GPU but cash too.
after this strange preamble I quote for the flag options, the method applicated is not much different than a normal Garbade Collector, you mark a no more usefull item and when the Garbage collector come he free the ram space used by this object, so this new space can be reused.
The same process is done by a lot of engine, and the destroy operation appens before the rendering calculations.
The final goal is always to reach a good in-between solution.
There is the possibility to force the instant destruction in every moment of the engine computation process, but this solution is always deprecated.
With the animation the way u typically use is to Destroy (setting flag to be destructed) at the end of the animation or in the last few frames.
At least you can use some tricks to make the fade more enjoyable (like particles).
The real problem is when you have to destroy object over the net (multiplayer games), in this case you have to establish what is the more attendible machine and pick that to calculate physics and interaction, this machine is always the server or the at least the host(depending on the game type).
I know that the question was marked as javascript question, but i couldn't resist to answer.
I enclose also a page from the unity documentation about the Destruct function were explain how they menage to remove item from a game enviroment:
https://docs.unity3d.com/ScriptReference/Object.Destroy.html
Have a nice day! and good coding.
I am working on a simple sorting algorithm demo app. I have a few sorting algorithms written in JavaScript, and an HTML page to try them out. I have tested the algorithms separately and they work fine.
You can input your own array, or a random one can be generated for you. If the size of the array was too large, whether you were generating it or sorting it, this would hang the UI, so I added a webworker that performs these operations in a separate thread.
The app logs what it is doing. Before the web worker, when working with really large arrays the log would appear all of a sudden only after the process was completed, but thanks to the webworker, logs appear as soon as each individual step is completed. Also, the page remains scrollable, while without the worker everything would freeze until the job was done.
Having delegated the computationally heavy elements to the webworker, I was expecting elements on the page to remain fully interactive, but this doesn't seem to be the case. All buttons etc on the page become unresponsive anyway. To be exact, they stay interactive for a really short while and then freeze--for example, if I mouseover a button, the cursor will change shape, but then it will stay frozen in that shape no matter where I move it, and if I click, the click won't register until after the webworker has done its job. This is a problem, because I have 'stop' buttons the user may click to stop the webworker if it is taking too long to generate an array or sort it. As things stand, the stop buttons freeze, and if you click them, this will have an effect only after the worker has finished anyway, effectively making them useless.
How can I make sure my controls on the page remain usable? Thanks!
So, I ran into what I think is the same problem, and was having a bear of a time with it for days. Thankfully I ran across this: https://nolanlawson.com/2016/02/29/high-performance-web-worker-messages/
For some reason it seems on both Chrome and Firefox, when webworkers post messages, it freezes the main thread when in the process of packing the data.
If you use JSON to fully serialize all of your objets when posting messages, it seems to make everything run much, much more smoothly.
Oculus Connect 3
I know this site was built on react. I want to know more about how to get that background animation and mouse over effect. It's simply awesome to experience. Based on this I will decide to go with React or Angular 2.
If you open your browser's inspection tool (almost always F12) you can see the layout of the webpage. It contains a canvas element with the id "grid". The animation is made using this.
The animation itself looks like a simple node graph, where if you move your cursor the nodes close to the cursor try to stay away from it, thus creating an explosion-like effect.
If your cursor stays fix for 2-3 seconds, the animation starts using a point going randomly across the page instead.
I doubt this animation uses too much of any of the libraries you mentioned in your question, thus deciding which one of these you will be using based on this demo (which let's be honest, max 200 lines of vanilla JavaScript) is like deciding what you eat for breakfast based on the food statistics of Mongolia.
And also, animations like this are what scares off most users. I don't think you can show me any big multimedia or social network site, which has animation close to this.
I am coding a mobile app using PhoneGap, and I am only using HTML and JavaScript. so far, i have made all of the betting functions, such as starting an initial bet, buttons to increase or decrease the bet, and the functions that are called when the player wins, loses, or gets blackjack. My problem is with the deck.
It might be helpful to know what I called my functions, I don't know, but here they are anyway:
function win() adds the value in the bet to the total money.
function lose() subtracts the value that was bet from the total money.
function blackjack() adds one and a half times the value bet to the total money, and I used the Math.floor() on that one.
So with that in mind, I have two questions.
I want to have a deck that is just like a physical deck. I might be a little picky, but i want it so that if a card is shown, it will not be called again until all 52 cards are used, or the deck is shuffled. The cards can come out at random, i don't care as long as the cards are not repeated. also, how would you separate the piles that are dealt?
For example, one pile is the user, the other is the dealer. i kinda think this is needed because we will use the card values to add and decide who has won.
This next part is not required, but would be nice.
Would there be a way that I could add an image to the card that is chosen, so that the player can visually see the card that is drawn?
Using JavaScript, html and css __ONLY__, could I save a value to the apps internal memory or something? What I'm trying to achieve is that when, the player closes the app, the amount of money that is their "winnings" will be saved, and shown the next time they open the app.
I also have one more question, but this one is not part of the app.
Do anyone know how old you have to be to sign up for a Google developer account? I want to publish my app when I finish, but I'm only 17 and I don't know if I'm allowed to create a Google developer account to post my app on Google play because of my age.
To store some data in the client side, you can use the localStorage in a web browser, maybe it is not the best method to work in Android, but ut works.
localStorage.setItem("key", "value");
localStorage.getItem("key");
there you can store info