Jump to content
  • Advertisement

Search the Community

Showing results for tags 'Javascript'.

The search index is currently processing. Current results may not be complete.


More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Audio
    • Music and Sound FX
  • Business
    • Business and Law
    • Career Development
    • Production and Management
  • Game Design
    • Game Design and Theory
    • Writing for Games
    • UX for Games
  • Industry
    • Interviews
    • Event Coverage
  • Programming
    • Artificial Intelligence
    • General and Gameplay Programming
    • Graphics and GPU Programming
    • Engines and Middleware
    • Math and Physics
    • Networking and Multiplayer
  • Visual Arts
  • Archive

Categories

  • Audio
  • Visual Arts
  • Programming
  • Writing

Categories

  • Game Developers Conference
    • GDC 2017
    • GDC 2018
  • Power-Up Digital Games Conference
    • PDGC I: Words of Wisdom
    • PDGC II: The Devs Strike Back
    • PDGC III: Syntax Error

Forums

  • Audio
    • Music and Sound FX
  • Business
    • Games Career Development
    • Production and Management
    • Games Business and Law
  • Game Design
    • Game Design and Theory
    • Writing for Games
  • Programming
    • Artificial Intelligence
    • Engines and Middleware
    • General and Gameplay Programming
    • Graphics and GPU Programming
    • Math and Physics
    • Networking and Multiplayer
  • Visual Arts
    • 2D and 3D Art
    • Critique and Feedback
  • Community
    • GameDev Challenges
    • GDNet+ Member Forum
    • GDNet Lounge
    • GDNet Comments, Suggestions, and Ideas
    • Coding Horrors
    • Your Announcements
    • Hobby Project Classifieds
    • Indie Showcase
    • Article Writing
  • Affiliates
    • NeHe Productions
    • AngelCode
  • Topical
    • Virtual and Augmented Reality
    • News
  • Workshops
    • C# Workshop
    • CPP Workshop
    • Freehand Drawing Workshop
    • Hands-On Interactive Game Development
    • SICP Workshop
    • XNA 4.0 Workshop
  • Archive
    • Topical
    • Affiliates
    • Contests
    • Technical
  • GameDev Challenges's Topics
  • For Beginners's Forum

Calendars

  • Community Calendar
  • Games Industry Events
  • Game Jams
  • GameDev Challenges's Schedule

Blogs

There are no results to display.

There are no results to display.

Product Groups

  • GDNet+
  • Advertisements
  • GameDev Gear

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Role


Twitter


Github


Twitch


Steam

Found 55 results

  1. I've been doing some research on delta compression (used and described in the Quake3 doc http://trac.bookofhook.com/bookofhook/trac.cgi/wiki/Quake3Networking,), and I'm looking for some clarifications on that topic please if possible. I understand that the delta compressed state is the difference between any given world states, meaning that if we store the state of every entity in a world state at every tick, the difference would be only the states of entities that changed between these two world states. Now when sending back the delta state to the client, do we go as far as only mentioning the properties that changed? Let's say a character moved only on X axis but didn't move on the Y axis between two states, are we sending to the client the whole state (x, and y) or only the new x position? If that's the case and let's assume there are a few more properties that describes a character, how can the client identify which properties have actually changed when rebuilding the information from binary data.
  2. I've been doing a lot of research on how to implement a game server to support a web based game in the vibe of surviv.io, or zombsroyaleio. There are so many ressources out there, but apparently surviv.io is built with NodeJS using Websockets. That implies also that they are built on TCP protocol. They might not look like big titles but they surely look very steady (from my point of view) and I feel like they do deal with classic Fast Paced multiplayer concepts such as Client-side prediction, interpolation, and potentially lag compensation. During my research, there seems to be that constant debate on UDP over TCP. To sum it all up, it seems that TCP is not appropriate for fast twitching games, however I do believe they fall into that category. How can they get away with TCP? Is this debate actually now outdated now we have better internet connections?
  3. Hi, I have a huge text file, its about 900 megs full of data thats comma delimated (.csv). It's basically just the dump of a huge table from a database. Anyway, the schema they were using was horrible, so I whipped up a little C++ program that parses the file and adds that data to a new (normalized) database. I left it running for a few hours and when I came back, my PC was bogged down and it said "The system is low on virtual memory... ". Anyway, has anyone ever parsed a huge file like this before? Any advise on a better way to do it? Should I do the whole thing at once? I was thinking of splitting the file into chunks... but how could I do such a thing? Is there any easy way to split this big bastard? I guess I could read say 50 lines into a buffer, spit it into a new file, clear the buffer, read 50 more lines, etc... then after doing this 10,000 times I start dumping to a new file. Thanks for any advise.
  4. DotaCard Channel

    Fight over dat Ancient

    https://foda-app.herokuapp.com/
  5. Is anyone aware of a universal Javascript Webkit? Ideally one that will run in all, and if not all then most browsers? Does anyone have any experience using a webkit in conjunction with WebGL?
  6. I am going to use/learn JavaScript once a week. I am wondering what the best backend for a store/login game server/etc. would be : PHP or C#, or something else. The criteria is longevity of uses, efficiency, value, and quickness to learn. Am I forgetting anything that would be needed, i.e. : the unresearched : JNode. I want to be lean with my learning. Thank you; it has taken quite a while to consider all this, Josheir The language that I know the best is C++. I will be using/studying this more too (other days.)
  7. I am considering writing a JavaScript browser game that uses three windows. What I am wondering is after the initial load of the game will the web pages be ready and therefore quick enough for any user. One problem would be that the third window would open and close so does this mean that there is a necessary reload of that seperate third window page code and images by the browser that would slow it down? Thank you; it would be a fun project, Josheir
  8. I am getting very interested in the very popular JavaScript. I would like to create games with it. One thing that concerns me is the availability of the webpages' code to others. I would really like to watch some movies on JavaScript but I don't know how to feel about people being able to copy my code (or for that matter if it is possible.) Am I being unrealistic? Are there means to make the code unreadable by the occasional viewer? Perhaps it is just html5 and css3 that can be viewed with google chrome's view source and I am confused. Thanks in Advance, Josheir
  9. Just wrapped up organising the code. Originally when I set out to program this project I had the idea that would-be followers of my efforts could just copy and paste quick little bits to the base files from my Introduction to Three.js post. However, I'm not that organise and don't have the level of skill to be able to pull that off. I've had to go through many older functions and modify this or that. So you'll have to bare with me but if you want to stay up to date with this project and have a copy of the code as of 'today' you'll have to just download everything here TD.zip current functionality: Toggle Screen Size; if you press ' f ' you'll toggle the size of the screen. Walls; If you press ' w ' you'll be able to select locations for walls. Moving your mouse along the grid you'll see the grid line the cursor is closest to turn yellow. If you left click the mouse button you'll create a wall. If you right click on a line under a wall that already exists the wall will be removed. Walls can be created between adjoining cells/squares/spaces. When you select a grid line that will block the path to an exit the line will turn red indicating that a wall can't be built there. If you try to left click nothing will happen. Towers; If you press ' t ' you'll be able to select the locations for tower. Moving your mouse along the grid you'll see a large square 2x2 appear in cyan if you select a location that doesn't envelop any surrounding wall. The large square will turn red if the location isn't permitted. As of right now the Tower placement function doesn't take into account Towers blocking the path to an exit. If you want to switch between walls and towers you must de-select your previous choice by pressing the say keyboard key. Clear as mud? Hope not. Here's a video showing what's been added. Now that this is all done I can start adding towers and enemies. I'm going to scrap the Misty Mist Tower. I'm instead going to replace it with the Tach Tower. It will shot bullets that will slow down an enemy with each successive hit. It's been done a bunch before. But unlike other games where the effect wears off, in this one the effect will be permanent. However; in order to dramatically reduce the speed of an enemy, it have to be shot many times. Let me know what you think! Thanks for reading.
  10. Awoken

    Introduction to THREE.js

    Time to introduce just how awesome THREE.js is. With the following three files you too can begin building content with THREE.js that will work in any browser that supports WebGL.The files include the latest and greatest minified version of THREE.js. three.min.js Out of the box code to begin this project. var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 70, 1024 / 768 , 0.01, 10 ); camera.position.z = 1; scene = new THREE.Scene(); geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( 1024 , 768 ); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } shapesTD.js And a basic html file which references both THREE.js and the basic code for starting this project. <html> <head> <title>Shapes TD</title> </head> <body oncontextmenu="return false;"> <script src='three.min.js'></script> <script src='shapesTD.js'></script> </body> </html> ShapesTD.html Once you click on the html file with both of the other files in the same directory you should see a spinning cube. If not, check to see if you have WebGL support enabled on the browser you are using. This will be my starting base. I figured I'd throw in the code as well so that if any beginner wants to have a shot at an extremely easy language, JavaScript, and a well documented API, then these files are for you.
  11. Hello! The game: https://www.combo-clicks.com/ DEV blog (so everyone can read the journey and some history): http://www.combo-clicks-dev.com/ TL;DR Feedback for Combo Clicks and also IDEAS for future games will be super appreciated (Hyper Casuals done in 3-4 weeks, each game with React Native). I will try to post on my blog atleast on weekly basis (both for gamers and developers) Thank you!
  12. Hi I tried to make some game in canvas JS. But dont know how to make sound effects like laser beam, I just add autoplay to some laser.wav and it is terrible. I need not fixed time. Each voise should have random time like 2s, 3s, or 10s? How to replace sound with another sound but not just replace but to make it slowly like animated. Is there such ablity or any library? Maybe some knew tutorial or book about sound game effects. myHobby.bmp
  13. O.k, one more entry before the weekend, Heading out for the weekend, and next week I'll be working on unirule, so this'll be it for a couple weeks. Just like last week I find that as the week goes by my excitement builds for the project I'm working on. Come Monday, I'll be thinking more about Shapes TD than Unirule, come next Friday the reverse will be true. Wall placement has been added. For those who want to give it a whirl: - press 'w' to toggle wall placement on an off - select a line ( it will turn yellow ), left click to create, right click to remove. Update the following files shapesTD.js add the following to keyboardControls.js update mouseControls.js Finally, add these three functions to generateGameContent.js Have a great weekend!
  14. I took a hiatus of sorts and am thinking about switching from C++ to JavaScript. It seemed like there was always a great response when I was into C++ here. Where is the hottest area/areas for JavaScript questions. I never had a question not responded to before! Thanks, Josheir
  15. Hey everybody, I'm currently working on a simple HTML5 game and my javascript collision detection function isn't working. The game features a little man that runs from side to side at the bottom of the screen, while a meteor falls from the sky. The function is supposed to detect a collision between meteor and man. In the routine, the top left corner of the man is at (player.x, player.y) and the top left corner of the meteor is at (meteor.x, meteor.y). The man is 25 pixels wide by 35 pixels tall. The meteor is 50 pixels wide by 50 pixels tall. Any idea where I've screwed in up this function? // ============================================================================= // Check for a collision between the 50 x 50 meteor and the 25 wide x 35 tall // main character // // Main character is drawn at 540 and is 35 tall, so the top of the character // is at y = 540 and the bottom is at y = 575. // // Function returns 1 if there has been a collision between the main // character and the meteor, otherwise it returns 0. // ============================================================================= function check_for_meteor_player_collision () { // edge positions for player and meteor var player_top = player.y; var player_bottom = player.y + 34; var player_left = player.x; var player_right = player.x + 24; var meteor_top = meteor.y; var meteor_bottom = meteor.y + 49; var meteor_left = meteor.x; var meteor_right = meteor.x + 49; var vertical_overlap = 0; var horizontal_overlap = 0; // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Check for vertical overlap // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Check if meteor bottom overlaps player if ((meteor_bottom >= player_top) && (meteor_bottom <= player_bottom)) { vertical_overlap = 1; } // Check if meteor top overlaps player if ((meteor_top >= player_top) && (meteor_top <= player_bottom)) { vertical_overlap = 1; } // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Check for horizontal overlap // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Check if meteor left side overlaps player if ((meteor_left >= player_left) && (meteor_left <= player_right)) { horizontal_overlap = 1; } // Check if meteor right side overlaps player if ((meteor_right >= player_left) && (meteor_right <= player_right)) { horizontal_overlap = 1; } // console.log("vertical_overlap = " + vertical_overlap); // console.log("horizontal_overlap = " + horizontal_overlap) // If we've got both a vertical overlap and a horizontal overlap, // we've got a collision if ((vertical_overlap == 1) && (horizontal_overlap == 1)) { return 1; } // if we've fallen through, we haven't detected a collision return 0; } // =============================================================================
  16. Awoken

    More Adventures in Robust Coding

    Hello GameDev, This entry is going to be a big one for me, and it's going to cover a lot. What I plan to cover on my recent development journey is the following: 1 - Goal of this Blog entry. 2 - Lessons learned using Node.js for development and testing as opposed to Chrome console. 3 - Linear Path algorithm for any surface. 4 - Dynamic Path Finding using Nodes for any surface, incorporating user created, dynamic assets. 5 - short term goals for the game. -- - -- - -- - -- - -- - -- - Goal of this Blog entry - -- - -- - -- - -- - -- - -- My goal for this adventure is to create a dynamic path-finding algorithm so that: - any AI that is to be moved will be able to compute the shortest path from any two points on the surface of the globe. - the AI will navigate around bodies of water, vegetation, dynamic user assets such as buildings and walls. - will compute path in less then 250 milliseconds. There are a few restrictions the AI will have to follow, in the image above you can see land masses that are cut off from one another via rivers and bodies of water are uniquely colored. If an AI is on a land mass of one color, for now, it will only be able to move to a location on the same colored land mass. However; there are some land masses that take up around 50% of the globe and have very intricate river systems. So the intended goal is be able to have an AI be on one end of the larger land mass and find the shortest path to the opposite end within 250 milliseconds. Currently my path finding algorithm can find the shortest path in anywhere from 10 ms and up, and when I say up, I mean upwards of 30 seconds, and that's because of the way I built the algorithm, which is in the process of being optimised. -- - -- - -- - -- - -- - -- - Lessons learned using Node.js for development and testing - -- - -- - -- - -- - -- - -- As of this writing I am using Node.js to test the efficiency of my algorithms. This has slowed down my development. I am not a programmer by trade, I've taught myself the bulk-work of what I know, and I often spend my time re-inventing the wheel and learning things the hard way. Last year I made the decision to move my project over to Node.js for continued development, eventually it all had to be ported over to Node.js anyways. In hind sight I would have done things differently. I would have continued to use Chrome console for testing and development, small scale, then after the code was proven to be robust would I then port it over to Node.js. If there is one lesson I'd like to pass on to aspiring and new programmers, it's this, use a language and development environment that allows you, the programmer, to jump into the code while it's running and follow each iteration, line by line, of code as it's be executed, basically debugging. It is so easy to catch errors in logic that way. Right now I'm throwing darts at a dart board, guesses what I should be sending to the console for feedback to help me learn more about logical errors using Node.js, see learning the hard way. -- - -- - -- - -- - -- - -- - Linear Path algorithm for any surface. - -- - -- - -- - -- - -- - -- In the blog entry above I go into detail explaining how I create a world. The important thing to take away from it is that every face of the world has information about all surrounding faces sharing vertices pairs. In addition, all vertices have information regarding those faces that use it for their draw order, and all vertices have information regarding all vertices that are adjacent to them. An example vertices and face object would look like the following: Vertices[ 566 ] = { ID: 566, x: -9.101827364, y: 6.112948791, z: 0.192387718, connectedFaceIDs: [ 90 , 93 , 94 , 1014 , 1015 , 1016 ], // clockwise order adjacentVertices: [ 64 , 65 , 567 , 568 , 299 , 298 ] // clockwise order } Face[ 0 ] = { ID: 0, a: 0, b: 14150, c: 14149, sharedEdgeVertices: [ { a:14150 , b: 14149 } , { a:0 , b: 14150 } , { a:14149 , b:0 } ], // named 'cv' in previous blog post sharedEdgeFaceIDs: [ 1 , 645 , 646 ], // named 's' in previous blog post drawOrder: [ 1 , 0 , 2 ], // named 'l' in previous blog post } Turns out the algorithm is speedy for generating shapes of large sizes. My buddy who is a Solutions Architect told me I'm a one trick pony, HA! Anyways, this algorithm comes in handy because now if I want to identify a linear path along all faces of a surface, marked as a white line in the picture above, you can reduce the number of faces to be tested, during raycasting, to the number of faces the path travels across * 2. To illustrate, imagine taking a triangular pizza slice which is made of two faces, back to back. the tip of the pizza slice is touching the center of the shape you want to find a linear path along, the two outer points of the slice are protruding out from the surface of the shape some distance so as to entirely clear the shape. When I select my starting and ending points for the linear path I also retrieve the face information those points fall on, respectively. Then I raycaste between the sharedEdgeVertices, targeting the pizza slice. If say a hit happens along the sharedEdgeVertices[ 2 ], then I know the next face to test for the subsequent raycaste is face ID 646, I also know that since the pizza slice comes in at sharedEdgeVertice[ 2 ], that is it's most likely going out at sharedEdgeVertices[ 1 ] or [ 0 ]. If not [ 1 ] then I know it's 99% likely going to be [ 0 ] and visa-versa. Being able to identify a linear path along any surface was the subject of my first Adventure in Robust Coding. Of course there are exceptions that need to be accounted for. Such as, when the pizza slice straddles the edge of a face, or when the pizza slice exits a face at a vertices. Sometimes though when I'm dealing with distances along the surface of a given shape where the pizza slice needs to be made up of more than one set of back to back faces, another problem can arise: I learned about the limitations of floating point numbers too, or at least that's what it appear to be to me. I'm sure most of you are familiar with some variation of the infinite chocolate bar puzzle So with floating point numbers I learned that you can have two faces share two vertices along one edge, raycaste at a point that is directly between the edges of two connecting faces, and occasionally, the raycaste will miss hitting either of the two faces. I attribute this in large part because floating point numbers only capture an approximation of a point, not the exact point. Much like in the infinite chocolate bar puzzle there exists a tiny gap along the slice equal in size to the removed piece, like wise, that tiny gap sometimes causes a miss for the raycaste. If someone else understands this better please correct me. -- - -- - -- - -- - -- - -- - Dynamic Path Finding using Nodes for any surface - -- - -- - -- - -- - -- - -- Now that I've got the linear path algorithm working in tip top shape, I use it in conjunction with Nodes to create the pathfinding algorithm. Firstly I identify the locations for all nodes. I do this using a Class I created called Orientation Vector, I mention them in the blog post above. When they're created, they have a position vector, a pointTo vector, and an axis vector. The beauty of this class is that I can merge them, which averages their position, pointTo, and axis vectors, and it allows me to rotate them along any axis, and it allows me to move them any distance along the axis of their pointTo vector. To create shoreline collision geometry, and node collision geometry, illustrated above, and node locations along shorelines, illustrated below, I utilise the Orientation Vector Class. Firstly, the water table for the world is set to an arbitrary value, right now it's 1.08, so if a vector for a given face falls below the table and one or two vertors are above the table then I know the face is a shoreline face. Then I use simple Math to determine at what two points the face meets the water and create two OVectors, each pointing at each-other. Then I rotate them along their y axis 90 and -90 degrees respectively so that they are now facing inland. Since each face, which are shoreline faces, touch one another, there will be duplicate OVectors a each point along the shore. However, each Ovector will have a pointTo vector relative to it's sister Ovector during creation. I merge the paired Ovectors at each point along the shore, this averages their position, pointTo and axis. I then move them inland a small distance. The result is the blue arrows above. The blue arrows are the locations of three of the thousands of nodes created for a given world. Each Node has information about the shoreline collision geometry, the node collision geometry ( the geometry connecting nodes ), and the Node to its left and the Node to its right. Each face of collision geometry is given a Node ID to refer to. So to create the path-finding algorithm. I first identify the linear path between the starting and ending points. I then test each segment of the linear path for collision geometry. If I get a hit, I retrieve the Node ID. This gives me the location for the Node associated for a given face of collision geometry. I then travel left and right along connecting Nodes checking to see if a new Linear path to the end point is possible, if no immediate collision geometry is encountered, the process continues and is repeated as needed. Subsequently, a list of points is established, marking the beginning, encountered Nodes and end of the line of travel. The List is then trimmed by testing linear paths between every third point, if a valid path is found, the middle point is spliced. Then all possible paths that have been trimmed are calculated for distance. the shortest one wins. Below is the code for the algorithm I currently use. its my first attempt at using classes to create an algorithm. Previously I just relied on elaborate arrays. I plan on improving the the process mentioned above by keeping track of distance as each path spreads out from it's starting location. Only the path which is shortest in distance will go through its next iteration. With this method, once a path to the end is found, I can bet it will be shortest, so I won't need to compute all possible paths like I am now. The challenge I've been facing for the past two months is sometimes the Nodes end up in the water, The picture above shows a shoreline where the distance the OVectors travel would place them in the water. Once a node is in the water, it allows the AI to move to it, then there is no shoreline collision geometry for it to encounter, which would keep it on land, and so the AI just walks into the ocean. Big Booo! I've been writing variations of the same function to correct the location of the geometry shown below in Red and Yellow below. But what a long process. I've rewritten this function time and time again. I want it to be, well as the title of this Blog states, Robust, but it's slow going. As of today's date, it's not Robust, and the optimised path-finding algorithm hasn't been written either. I'll be posting updates in this blog entry as I make progress towards my goal. I'll also make mention what I achieve for shortest, long time for pathfinding. Hopefully it'll be below 250 ms. -- - -- - -- - -- - -- - -- - short term goals for the game - -- - -- - -- - -- - -- - -- Badly... SO BADLY I want to be focusing on game content, that's all I've been thinking about. Argh, But this all has to get wrapped up before I can. I got ahead of myself, I'm guilty of being too eager. But there is no sense building game content on top of an engine which is prone to errors. My immediate goals for the engine are as follows: // TO DO's // // Dec 26th 2017 // /* * << IN PROGRESS >> -update path node geometry so no errors occur * -improve path finding alg with new technique * -improve client AI display -only one geometry for high detail, and one for tetrahedron. * -create ability to select many AI at the same time by drawing a rectangle by holding mouse button. * -create animation server to recieve a path and process animation, and test out in client with updates. * -re-write geometry merging function so that the client vertices and faces have a connected Target ID * -incorporate dynamic asset functionality into client. * -create a farm and begin writing AI. * -program model clusters * -sychronize server and client AI. Test how many AI and how quickly AI can be updated. Determine rough estimate of number of players the server can support. * */ see the third last one! That's the one, oh what a special day that'll be. I've created a Project page, please check it out. It gives my best description to date of what the game is going to be about. Originally I was going to name it 'Seed', a family member made the logo I use as my avatar and came up with the name back in 2014. Then just this week I find out that some studio in Europe is making THE EXACT SAME GAME ! WHA??? http://www.pcgamer.com/seed-is-a-hugely-ambitious-in-development-mmo-that-echoes-eve-online-rimworld-and-the-sims/ I'm being facetious, but they're very close to being the same game. Anyways, Mine will be better, you read it here first! hahaha. The project is no longer going to be called Seed, it's instead going to be called what I've always called it and will probably always call it; the game [ edit: 02/02/18 Some new screen shots to show off. All the new models were created by Brandross. There are now three earth materials, clay, stone and marble. There are also many types of animals and more tree types. ] Thanks for reading and if you've got anything to comment on I welcome it all. Awoken
  17. This video is showing early work on my procedural generation test bed. Everything is in javascript using ThreeJS and ThreeCSG. 0:00 - Starts with a cube generator and overriding its input parameters to change it's size. 0:12 - Showing a geometry subtraction test. This uses ThreeCSG. 0:20 - A tiled floor generator. 0:27 - A 'modular' room generator. These would be simple rooms that are made from a standard tile shape - think board games. 0:39 - A stone wall generator that follows a path to build the wall. I'll try to record progress with these every so often. It's always fun seeing how things progress
  18. I'm trying to capture a frame with gl.readPixels and send the data to my server. For testing purposes, I tried rendering a texture with the same Uint8Array I used with gl.readPixels, but unfortunately can't get the texture to show an image. Let me share the steps I'm taking. I made sure to allocate memory outside of the game loop: const width = Game.Renderer.width; const height = Game.Renderer.height; let pixels = new Uint8Array(4 * width * height); And before i unbind the frame buffer in the drawing function, I pick up the pixels: gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); if (stream) { if (stream.ready) stream.socket.send(pixels); } This is also where I send the pixels to the server. In my render function I have a function updating the texture I use for displaying video, or in this case: a different image every frame: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._video) This works perfectly with a video or an image element, but if I pass in my uint8array no image is rendered. The plan is to have the server send that same array to the other clients so they can use it to update their textures. Hopefully this makes sense. Thanks! BTW: Not sure why my thread appeared two times, my connection timed out and I guess I pressed it two times. My apologies mods, I hid the duplicate thread.
  19. I want to make a html5 canvas / javascript game, similar to agar.io. I know a little node.js, and I think I understand the way online multiplayer works, but now that I do understand I realize it's gonna be a ton of work if I want to do it from the ground up with something like socket.io. My question is: are there libraries that can help with the multiplayer aspects of my game (sending game packets, etc.), and if so, is the performance for that library fast enough to run my game? (has a latency at least as low as agar.io)
  20. I'm trying to learn how to make my own model, view, projection setup. I've managed to translate, rotate, and scale my models, but have an issue with my perspective projection matrix. Even though I'm multiplying halfFOV with my aspect ratio, the image looks squished unless my window is a perfect square like this: If it's not a perfect square: the wider my window the more stretched my object looks in the Z axis like an egg. So it definitely has to do with with my projection matrix, specifically related to my aspect ratio. The way I'm multiplying my matrices is as follows, I'll show you my translation and projection keep it simple: Translation [1, 0, 0, 0, 0, 1 0, 0 0, 0, 1, 0, x, y, z, 1] Projection let halfFOV = Math.tan(toRad(FOV/2.0)); let zRange = (NEAR - FAR); let x = 1.0 / (halfFOV * aspect); let y = 1.0 / (halfFOV); let z = (NEAR + FAR) / zRange; let w = 2 * FAR * NEAR / zRange; [x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, -1, 0, 0, w, 0] I normally see the -1 where the w is, but for some reason I need to set it up the way you see it in my matrix, if not it won't work. I'll also share how I'm multiplying matrices very quickly: function (r, a, b) r.mat[0] = (a.mat[0] * b.mat[0]) + (a.mat[1] * b.mat[4]) + (a.mat[2] * b.mat[8]) + (a.mat[3] * b.mat[12]); r.mat[1] = (a.mat[0] * b.mat[1]) + (a.mat[1] * b.mat[5]) + (a.mat[2] * b.mat[9]) + (a.mat[3] * b.mat[13]); r.mat[2] = (a.mat[0] * b.mat[2]) + (a.mat[1] * b.mat[6]) + (a.mat[2] * b.mat[10]) + (a.mat[3] * b.mat[14]); r.mat[3] = (a.mat[0] * b.mat[3]) + (a.mat[1] * b.mat[7]) + (a.mat[2] * b.mat[11]) + (a.mat[3] * b.mat[15]); // don't need to add the rest of it... // How I use it Mathf.mul(resultMat, position, projection); So I take the left row and multiply it against the right column. I then get rows as a result as you can see. If you want to check out the full implementation it's here. I've also checked that I'm getting the correct window size. I divide width/height to get the aspect ratio too. Not sure what I'm doing wrong. I also tried multiplying my matrices on the gpu (glsl) and I gt the same results, so it's definitely my projection matrix Hope this all makes sense. Edit: I probably should have posted this thread in the Math categories, my apologies.
  21. I'm trying to make fixed time-step game loop following this wonderful site, but I suspect I'm not understanding the concept correctly. I'm working with JavaScript and the browser, but I'm sure you'll understand better than I do. Here are the steps I'm taking: - I'm using the 60fps update loop (requestAnimationFrame) provided by browsers. - Using a 30fps step (1.0/30.0) for my fixed update loop. - I'm currently getting all the necessary time data at the beginning of the frame: function updateFrame () { now = window.performance.now(); msDt = now - last; dt = msDt / 1000.0; // ignored lag += Math.min(1, msDt); last = now; } - I'm also separating the physics (fixed update) and rendering update loops like this: // within update frame loop while (lag >= fpsLimit) { lag -= fpsLimit; game.fixedUpdate(); } game.update(); game.render(); If you notice, I increment lag in milliseconds, not seconds (divided by 1000). That way, when I get to the while loop, lag decreases exactly 30 times and then moves down to rendering part. So if I log inside the while loop and after it, I get 30 logs from the while loop and 1 after it. Repeat. But if I do it the way the site recommends, which is to increment lag by seconds (divided by 1000), the number is lower, but the while loop only runs once. I'm guessing because I only increment by the fpsLimit (0.033) and it would take only one iteration to escape the while loop. I hope I made sense, I'm basically trying to do something similar to Unity. Have a fixed update I know will loop 30 times, and also update every frame. Not sure if I'm understand correctly though. Thanks if your read this far!
  22. SureBrz

    Missile Command

    Here goes my game. This challenge is sooooo convenient to me for I have no ability of drawing... :( By finishing it I learned lots of Cocos Creator, which is good at UI effects. Thanks a lot for the Challenge! Download (Windows only): https://www.dropbox.com/s/q0l37r5urhqgtup/MissileCommandRelease.zip?dl=0 Source code: https://github.com/surevision/Missile_Command_Challenge Screenshot:
  23. We're looking for programmers for our project. Our project is being made in Unity Requirements: -Skills in Unity -C# -Javascript -Node.js We're looking for programmers who can perform a variety of functions on our project. Project is a top-down hack-and-slash pvp dungeon-crawler like game. Game is entirely multiplayer based, using randomized dungeons, and a unique combat system with emphasis on gameplay. We have a GDD to work off of, and a Lead Programmer you would work under. Assignments may include: -Creating new scripts of varying degrees specific to the project (mostly server-side, but sometimes client-side) -Assembling already created monsters/characters with existing or non-existing code. -Creating VFX -Assembling already created environment models If interested, please contact: eldwin11929@yahoo.com This project is unpaid, but with royalties. --- Additional Project Info: Summary: Bassetune Reapers is a Player-verus-Player, competitive dungeon crawler. This basically takes on aspects of dungeon crawling, but with a more aggressive setting. Players will have the option to play as the "dungeon-crawlers" (called the 'Knights', or "Knight Class", in-game) or as the "dungeon" itself (literally called the 'Bosses', or "Boss Class", in-game). What this means is that players can choose to play as the people invading the dungeon, or as the dungeon-holders themselves. Key Features: -Intense, fast-paced combat -Multiple skills, weapons, and ways to play the game -Tons of different Bosses, Minibosses, creatures and traps to utilize throughout the dungeon -Multiple unique environments -Interesting, detailed lore behind both the game and world -Intricate RPG system -Ladder and ranking system -Lots of customization for both classes s of customization for both classes
  24. NeutrinoParticles is a Real-time Particles Effect Editor and it is a new extraordinary editor on the market.www.neutrinoparticles.com What makes this editor recognisably different than other editors is, it allows you to export the effects to the source code in JavaScript or C# which makes them extremely compact and fast, and it is absolutely FREE. MacOS and Linux users may use WINE to run the editor for now. Native packages will be available soon. Particles Effect Editor, JavaScript, C#, Unity, PIXI Engine, Generic HTML The software has some renderers for JavaScript (PIXI Engine, Generic HTML) and for C# (Unity, C# Generic). For example, if you use PIXI on your projects, you only need to copy/paste several lines of code to make it work.
  25. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!