i want to create a animation in WebGl, my idea is like this:
You inside a large rectangle.
The sides of this rectangle are animated with image of a binary gif.
The camera is going forward until infinity.
I want to create like this image in WebGl:
http://i.stack.imgur.com/D0GpT.jpg
But i don't know, how do put the camera inside a large rectangle and going the camera to forward until infinity, someone can help me?
Here's what the author called "nano-Doom" :-) It has a few planes which make up a world, and you can move the camera around with the keyboard:
http://learningwebgl.com/blog/?p=1067
Given the little information you provided in your question, my suggestion would be to run through the preceeding lessons up to the one given above.
Related
We're developing a game with impactjs that allows 'chaining' of entities as they are clicked. Basically this just draws a line between the two points, with a neon glow effect. So far, so good. Now, we have a request to make the 'chain' connections animated - fire, sparkles, etc. Essentially things that seem like they'd need actual graphic animations to look right. As the entities can be any distance/angle from each other, we're stuck at how to best implement a solution for this - that is, how to draw a diagonal image, for example, between two random points that we can animate. Any thoughts our suggestions on how to pull this off would be much appreciated.
Maybe create a particle entity with an Animation Sheet containing the necessary animations/particle effects. And then draw these particles along the line that from point A to point B.
When you want to animate it to fire/sparkles etc. run the animation for all those entities. in that line.
I'd be inclined to agree with Prat. Particle effects would most likely be what you need.
Here is a tutorial on generating particle effects in impact.js that might help you out.
http://www.pointofimpactjs.com/snippets/view/24/particle-effects-generation
I'm making a game similar to 'Run' (http://www.albinoblacksheep.com/games/run) but I can't quite figure out the floor part. I'm not wanting the sides and a ceiling like in 'Run', just the main floor.
I'm new to Flash game development (AS3) but I know the basics. I realise the character isn't moving and is just turning (the level itself moves). How do a make a continuous floor, do I have to make a very long .fla file, or do I have to do this with code?
All ideas and help appreciated, Thanks. =)
You should use Tiles. Basically, a tile game consists of a lot of squared tiles, which are inserted when appear in screen and removed when goes out.
In your case, maybe you could use a big tile, with screen's size.
You can visualize a good example here, also a very good resource for gamedev on Flash.
You need to generate sprites of the edge of the screen and either recycle them when their x < some value or dispose and create new ones.
I think you can just use Bitmap.draw() to draw different pixels on a Bitmap that you've applied a 3D transformation to. You can see the basic concept illustrated here.
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.
I'm using KImageMapEditor on Linux (Ubuntu) to create an image map. The shapes in the image are a little complex so I'm using the freehand tool to draw them. However, this is really the same as the polygon tool so the shapes have ended up with a lot of points, which has made the HTML pretty huge.
Does anyone know of a way to reduce the complexity of the shapes, like "smoothing out" the lines?
I should also mention the reason I want the shapes to be fairly accurate is because I'm intending to do something like this, where each shape is highlighted on mouseover: http://davidlynch.org/js/maphilight/docs/demo_usa.html
Since users aren't going to click to the pixel, give them some leeway and create a "sloppy" map which roughly outlines each shape instead of clinging to the actual pixel outline.
This is in the same way as you don't expect a click on a link to fail just because you click on the background which shines through the text. You expect the bounding box of the text to act as the click-able area instead of the "black pixels".
Algorithm: Given three consecutive points, eliminate the middle point if the angle created is less than some tolerated error e.
Polygonal path simplification with angle constraint
I have an image of a basic game map. Think of it as just horizontal and vertical walls which can't be crossed. How can I go from a png image of the walls to something in code easily?
The hard way is pretty straight forward... it's just if I change the image map I would like an easy way to translate that to code.
Thanks!
edit: The map is not tile-based. It's top down 2D.
I dabble in video games, and I personally would not want the hassle of checking the boundaries of pictures on the map. Wouldn't it be cleaner if these walls were objects that just happened to have an image property (or something like it)? The image would display, but the object would have well defined coordinates and a function could decide whether an object was hit every time the player moved.
I need more details.
Is your game tile based? Is it 3d?
If its tile based, you could downsample your image to the tile resolution and then do a 1:1 conversion with each pixel representing a tile.
I suggest writing a script that takes each individual pixel and determines if it represents part of a wall or not (ie black or white). Then, code your game so that walls are built from individual little block, represented by the pixels. Shouldn't be TOO hard...
If you don't need to precompute anything using the map info. You can just check in runtime logic using getPixel(x,y) like function.
Well, i can see two cases with two different "best solution" depending on where your graphic comes from:
Your graphics is tiled, and thus you can easily "recognize" a block because it's using the same graphics as other blocks and all you would have to do is a program that, when given a list of "blocking tiles" and a map can produce a "collision map" by comparing each tile with tiles in the "blocking list".
Your graphics is just some graphics (e.g. it could be a picture, or some CG graphics) and you don't expect pixels for a block to be the same as pixels from another block. You could still try to apply an "edge detection" algorithm on your picture, but my guess is then that you should rather split your picture in a BG layer and a FG layer so that the FG layer has a pre-defined color (or alpha=0) and test pixels against that color to define whether things are blocking or not.
You don't have much blocking shapes, but they are usually complex (polygons, ellipses) and would be unefficient to render using a bitmap of the world or to pack as "tile attributes". This is typically the case for point-and-click adventure games, for instance. In that case, you're probably to create path that match your boundaries with a vector drawing program and dig for a library that does polygon intersection or bezier collisions.
Good luck and have fun.