Have a look at moodi.org, sony.com/be-moved, http://www.spaceneedle.com/home/,
. How can i make site like this?
Basically, it's all done by detecting user's scrolling amount, and moving things accordingly.
You need some JavaScript and of course html & css to achieve something like that.
What JS does is that it detects if user is scrolling, it's direction and speed, then tells object "A" to move at the opposite direction of scroll, and also at 0.8 speed of it. Object "B" moves at the opposite direction but with 1.2 speed of scrolling, so You'll feel like object "B" is closer to you.
This is just a very simple example on how it works.
Remember to have a good scenario before touching the code, and while coding, break your problems into small pieces and look for them in here,
For example: How to change position of absolute element based on client scrollTop?
That's how you'll learn.
Useful links:
There are many technics, to make something efficient and clean, you need to be familiar with them to make the best decision.
Here are some links which help you start:
This is somehow old, but I think helps understanding the concept : http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website-part-2/
Css-only approach : http://keithclark.co.uk/articles/pure-css-parallax-websites/
These are just some starting points, of course you can find more tutorials and even look through source of your favorite websites to see how they achieved the effect.
Final note : I think one important thing to bear in mind is not to move many objects at the same time, once they are off the viewport, stop moving them, this helps a lot when it comes to performance specially on older machines.
jQuery Waypoint is a handy tool, which is introduced in the second link.
Related
I have been looking at Epic Games' Fortnites Website and I am trying to figure out how they achieved the 3D effect on the page:
Epic Games' Fortnite website - scrolled down to 3rd slide
Does any one have any idea how to do it? I would really like something similar to a project I'm working on. I have found Three.js, but I am quite sure that is not the solution they went with.
For these types of questions, i can only recommend to install spector.js and have a look yourself. In short: everything you see is 100% faked.
I mean, that's always the case. In fact, if you want to build something like that, your first question should always be: how much of this can I fake and still get away with that?
In this example, it turns out: everything. Just open the devtools and click through all the assets in the network-tab. You will find these two textures:
looks familiar, right?
So what they appear to be doing is they are using three.js with some custom shaders to handle the translations, the flickering of the lights and the highlighting. These effects are computed using the normal-map and an additional mask-texture which I couldn't quite figure out what it does. But again, if you look at the scene in spector.js you can see the shaders used for every drawcall.
The only thing that is a bit more complex is the little robot-friend in the bottom left corner. But again, it's not 3d as in meshes and so on but rather a set of flat textured quads running a bones-animation thing.
I think that makes it a really great website after all.
Given that epic is building the unreal-engine I would suspect the original renders were done there. And I agree, the lighting looks really amazing :)
It is a simple parallax effect using animated sprite sheets.
Parallax effect is achieved by using several layers of images/video on top of one another in different Z-depth.
You can achieve the moving part by using the mousemove event to track the cursor.
I am new to processing, i found it by searching for "draw with coding" , and i tried it, seems every time i modify the code, i have to stop and render again to get the final result
Is there any way to get updated graph without re-rendering? that can be much more convenient for creating simple figures.
if not, is there any alternative to processing that can draw a graph with coding?
I've used Tikz in Latex, but that is just for Latex, I want something that can let me draw a figure by coding, I've suffered enough though using software like coreldraw, it lacks the fundamental elegance of coding..
thanks alot！
Please have a look at the FluidForms libraries.
easy to setup
documentation and video tutorials
as long as you don't run into exceptions, live code comfortably
if you prefix public variables with param you also get sliders for free :)
Do check out the video tutorials, especially this one:
Also, if using Python isn't a problem I recommend having a look at:
NodeBox
Field
Python is a brilliant scripting language - which makes prototyping/'live coding' easy(although it can be compiled and it also plays nicely with c/c++) and is easy to pick up and a joy to use.
In Processing, you must re-run your program to see the changes (graphically), unless you write code to receive input from the user to dynamically adjust what you are drawing. For creating user interfaces there's for example the controlP5 library (http://www.sojamo.de/libraries/controlP5/).
It doesn't support "live coding" (at least that I know of).
You must re-run the code to see the new result.
If Live coding is what you're looking for, check out Fluxus (http://www.pawfal.org/fluxus/) or Impromptu (http://en.wikipedia.org/wiki/Impromptu_(programming_environment)
I have been tearing my hair out for a while over this. I need an OpenGL 3.2 Core (no deprecated stuff!) way to efficiently render many sprites, using batching (no instancing).
I've seen examples that do this with geometry alone, but mine also needs to send textures to it, I don't know how to do this.
I need a well done example of it working in action. And looking at how other libs like monogame and such do it isn't much help, because all I'm interested in is the GL code, and it has to have no deprecated stuff in it.
Basically I want to be able to efficiently render thousands+ of sprites, all having textures. The texture is just a spritesheet, so I just need to tell it to render a region of that spritesheet.
I'm disappointed in the amount of material available for programmable pipeline. To the point where it seems like it'd be so much easier to just say screw it and use fixed pipeline, even though I definitely don't want to do that.
So yeah, any full examples that do what I want? Or could somebody more knowledgable write one up? :)
A lot of the examples are "oh, here's how you render 1 triangle". Well that's great, except nobody needs to render only 1 triangle/quad. And they need to be textured in addition to that!
An example that uses VBOs/VAOs/EBOs
ALSO: this means the code can't use glTexPointer and that stuff, but just in raw VBOs/VAOs...
I saw this question and decided to write a little program that does some "sprite" rendering using points and gl_PointSize. I'm not quite sure what you mean by "batching" as opposed to "instancing," but my program uses the glDrawArraysInstanced() call so that I can render multiple points without needing my VBO to be variable sized. My code also doesn't texture the sprites, but that's easy enough to add in (upload the active texture index (the one that was active during your call to glTexSubImage), to a GLSL sampler2D using glUniform1i).
Anyway, here's the program I wrote: http://litherum.blogspot.com/2013/02/sprites-in-opengl-programmable-pipeline.html Hope you can learn from it!
I am in the process of developping a game, and after two months of work (not full time mind you), I have come to realise that our specs for the game are lacking a lot of details. I am not a professional game developper, this is only a hobby.
What I would like to receive help or advices for is this: What are the major components that you find in games, that have to be developped or already exists as librairies? The objective of this question is for me to be able to specify more game aspects.
Currently, we had specified pretty much only how we would work on the visual, completely forgetting everything about game logic (AI, Entities interactions, Quest logic (how do we decide whether or not a quest is completed)).
So far, I have found those points:
Physics (collision detection, actual forces, etc.)
AI (pathfinding, objectives, etc.)
Model management
Animation management
Scene management
Combat management
Inventory management
Camera (make sure not to render everything that is in the scene)
Heightmaps
Entities communication (Player with NPC, enemy, other players, etc)
Game state
Game state save system
In order to reduce the scope of this queston, I'd like it if you could specifically discuss aspects related to developping an RPG type of game. I will also point out that I am using XNA to develop this game, but I have almost no grasp of all the classes available yet (pretty much only using the Game component with some classes that are related to it such as GameTime, SpriteBatch, GraphicDeviceManager) but not much more.
You have a decent list, but you are missing storage (save load), text (text is important in RPGs : Unicode, font rendering), probably a macro system for text (something that replaces tokens like {player} with the player characters name), and most important of all content generation tools (map editor, chara editor, dialog editor) because RPGs need content (or auto generation tools if you need ). By the way have links to your work?
I do this exact stuff for a living so if you need more pointers perhaps I can help.
I don't know if this is any help, but I have been reading articles from http://www.gamasutra.com/ for many years.
I don't have a perfect set of tools from the beginning, but your list covers most of the usual trouble for RUNNING the game. But have you found out what each one of the items stands for? How much have you made already? "Inventory Management" sounds very heavy, but some games just need a simple "array" of objects. Takes an hour to program + some graphical integration (if you have your GUI Management done already).
How to start planning
When I develop games in my spare time, I usually get an idea because another game lacks this function/option. Then I start up what ever development tool I am currently using and try to see if I can make a prototype showing this idea. It's not always about fancy graphics, but most often it's more about finding out how to solve a certain problem. Green and red boxes will help you most of the way, but otherwise, use Google Images and do a quick search for prototype graphics. But remember that these images are probably copyrighted, so only use them for internal test purposes and to explain to your graphic artists what type of game/graphic you want to make.
Secondly, you'll find that you need to find/build tools to create the "maps/missions/quests" too. Today many develop their own "object script" where they can easily add new content/path to a game.
Many of the ideas we (my friends and I) have been testing started with a certain prototype of the interface, to see if its possible to generate that sort of screen output first. Then we build a quick'n'dirty map/level-editor that can supply us with test maps.
No game logic at this point, still figuring out if the game-engine in general is running.
My first game-algorithm problem
Back when I was in my teens I had a Commodore 64 and I was wondering, how do they sort 10 numbers in order for a Highscore? It took me quite a while to find a "scalable" way of doing this, but I learned a lot about programming too.
The second problem I found
How do I make a tank/cannon fire a bullet in the correct direction when I fly my helicopter around the screen?
I sat down and drew quick sketches of the actual problem, looked at the bullet lines, tried some theories of my own and found something that seemed to be working (by dividing and multiplying positions etc.) later on in school I discovered this to be more or less Pythagoras. LOL!
Years and many game attempts later
I played "Dune" and the later C&C + the new game Warcraft (v1/v2) - I remember it started to annoyed me how the lame AI worked. The path finding algorithms were frustrating for the player, I thought. They moved in direction of target position and then found a wall, but if the way was to complex, the object just stopped. Argh!
So I first sat with large amounts of paper, then I tried to draw certain scenarios where an "object" (tank/ork/soldier) would go from A to B and then suddenly there was a "structure" (building/other object) in the pathway - what then?
I learned about A-star pathfinding (after solving it first on my own in a similar way, then later reading about the reason for this working). A very "cpu heavy" way of finding a path, but I learned a lot from the process of "cracking this nut". These thoughts have helped me a lot developing other game algortimes over time.
So what I am saying is: I think you'll have to think more of:
How is the game to be played?
What does the user experience look like?
Why would the user want to come back to the game?
What requirements are needed? Broadband? 19" monitor with 1280x1024?
An RPG, yes - but will it be multi-user or single?
Do we need a fast network/server setup or do we need to develop a strong AI for the NPCs?
And much more...
I am not sure this is what you asked for, but I hope you can use it somehow?
There are hundreds of components needed to make a game, from time management to audio. You'll probably need to roll your own GUI, as native OS controls are very non-gamey. You will probably also need all kinds of tools to generate your worlds, exporters to convert models and textures into something suitable for your game etc.
I would strongly recommend that you start with one of the many free or cheap game engines that are out there. Loads of them come with the source code, so you can learn how they have been put together as you go.
When you think you are ready, you can start to replace parts of the engine you are using to better suit your needs.
I agree with Robert Gould's post , especially about tools and I'd also add
Scripting
Memory Management
Network - especially replication of game object states and match-making
oh and don't forget Localisation - particularly for text strings
Effects and effect timers (could be magical effects, could just be stuff like being stunned.)
Character professions, skills, spells (if that kind of game).
World creation tools, to make it easy for non-programmer builders.
Think about whether or not you want PvP. If so, you need to really think about how you're going to do your combat system and any limits you want on who can attack whom.
Equipment, "treasure", values of things and how you want to do the economy.
This is an older question, but IMHO now there is a better answer: use Unity (or something akin to it). It gives you 90% of what you need to make a game up front, so you can jump in and focus directly on the part you care about, which is the gameplay. When you run aground because there's something it doesn't do out of the box, you can usually find a resource in the Asset Store for free or cheap that will save you a lot of work.
I would also add that if you're not working on your game full-time, be mindful of the complexity and the time-frame of the task. If you'll try to integrate so many different frameworks into your RPG game, you can easily end up with several years worth of work; maybe it would be more advisable to start small and only develop the "core" of your game first and not bother about physics, for example. You could still add it in the second version.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've always felt that my graphic design skills have lacked, but I do have a desire to improve them. Even though I'm not the worlds worst artist, it's discouraging to see the results from a professional designer, who can do an amazing mockup from a simple spec in just a few hours. I always wonder how they came up with their design and more importantly, how they executed it so quickly.
I'd like to think that all good artists aren't naturally gifted. I'm guessing that a lot of skill/talent comes from just putting in the time.
Is there a recommended path to right brain nirvana for someone starting from scratch, a little later in life? I'd be interested in book recommendations, personal theories, or anything else that may shed some light on the best path to take. I have questions like should I read books about color theory, should I draw any chance I have, should I analyze shapes like an architect, etc...
As far as my current skills go, I can make my way around Photoshop enough where I can do simple image manipulation...
Thanks for any advice
Most of artistic talent comes from putting in the time. However, as in most skills, practicing bad habits doesn't help you progress.
You need to learn basic drawing skills (form, mainly) and practice doing them well and right (which means slowly). As you practice correctly, you'll improve much faster.
This is the kind of thing that changes you from a person who says, "It doesn't look right, but I can't tell why - it's just 'off' somehow" to a person who says, "Oops, the arm is a bit long. If I shorten the elbow end it'll change the piece in this way, if I shorten the hand end it'll change the piece this way..."
So you've got to study the forms you intend to draw, and recognize their internally related parts (the body height is generally X times the size of the head, the arms and legs are related in size but vary from the torso, etc). Same thing with buildings, physical objects, etc.
Another thing that will really help you is understanding light and shadow - humans pick up on shape relationships based on outlines and based on shadows.
Color theory is something that will make your designs attractive, or evoke certain responses and emotions, but until you get the form and lighting right the colors are not something you should stress. One reason why art books and classes focus so much on monochrome drawings.
There are books and classes out there for these subjects - I could recommend some, but what you really need is to look at them yourself and pick the ones that appeal to you. You won't want to learn if you don't like drawing fruit bowls, and that's all your book does. Though you shouldn't avoid what you don't like, given that you're going the self taught route you should make it easy in the beginning, and then force yourself to draw the uninteresting and bland once you've got a bit of confidence and speed so you can go through those barriers more quickly.
Good luck!
-Adam
That's a difficult thing. Usually people think "artistic skills" come from your genes but actually they do not.
The bests graphic designer I know have some sort of education in arts. Of course, photoshop knowledge will allow you to do things but being interested in art (painting specially) will improve your sensitivity and your "good taste".
Painting is a pleasure, both doing it and seeing it. Learning to both understand and enjoy it will help and the better way to do it is by going to museums. I try to go to as much expositions as I can, as well as read what I can on authors and styles (Piccaso, Monet, Dali, Magritte, Expresionism, Impresionism, Cubism, etc) that will give you a general overview that WILL help.
On the other side... you are a programmer so you shouldn't be in charge of actually drawing the icons or designing the enterprise logo. You should however be familiarized with user interface design, specially with ease of use, and terms as goal oriented design.
Of course, in a sufficiently large company you won't be in charge of the UI design either, but it will help anyway. I'd recommend the book About Face, which centers in goal oriented design as well as going through some user interface methapores and giving some historic background for the matter.
I'm no artist and I'm colorblind, but I have been able to do fairly well with track creation for Motocross Madness and other games of that type (http://twisteddirt.com & http://dirttwister.com).
Besides being familiar with the toolset I believe it helps to bring out your inner artist.
I found that the book "Drawing on the Right Side of the Brain" was an amazing eye opening experience for me.
One of the tricks that it uses is for you to draw a fairly complicated picture while looking at the picture upside down. If I had drawn it while looking at it right side up it would have looked horrible. I impressed myself with what I was able to draw while copying it while it was upside down.
I did this many years ago. I just looked at their website and I think I will order the updated book and check out their DVD.
I have a BFA in Graphic Design, although I don't use it much lately. Here's my $.02.
Get a copy of "Drawing on the Right Side of the Brain" and go through it. You will become a better artist/drawer as a result and I'm a firm believer that if you can't do it with pencil/paper you won't be successful on the computer. Also go to the bookstore and pick up a copy of How or one of the other publications. I maintain a subscription to How just for inspiration.
I'll see if I can dig up some web links tonight for resources (although I'm sure others will provide some).
most importantly, carry a sketch book and use it. Draw. Draw. Draw.
Drawing is probably what I'd recommend the most. Whenever you have a chance, just start drawing. Keep in mind that what you draw doesn't have to be original; it's a perfectly natural learning tool to try and duplicate someone else's work. You'll learn a lot. If you look at all the great masters, they had understudies who actually did part of their masters' works, so fight that "it must be original" instinct that school's instilled in you, and get duplicating. (Just make sure you either destroy or properly label these attempts as copies--you don't want to accidentally use them later and then be accused of plagiarism..)
I have a couple of friends in the animation sector, and one of them told me that while she was going through college, the way she was taught to draw the human body was to go through each body part, and draw it 100 times, each in a completely different pose. This gets you comfortable with the make-up of the object, and helps you get intimately knowledgeable about how it'll look from various positions.
(That may not apply directly to what you're doing, but it should give you an indicator as to the amount of discipline that may be involved in getting to the point you seek.)
Definitely put together a library of stuff that you can look to for inspiration. Value physical media that you can flip through over websites; it's much quicker to flip through a picture book than it is to search your bookmarks online. When it comes to getting your imagination fired up, having to meticulously click and wait repeatedly is going to be counter-productive.
Inspiration is probably your biggest asset. Like creative writing, and even programming, looking at what people have done and how they have done will give you tools to put in your toolbox.
But in the sense of graphic design (photoshop, illustrator, etc), just like programmers don't enjoy reinventing the wheel, I don't think artwork is any different. Search the web for 'pieces' that you can manipulate (vector graphics: example). Run through tutorials that can easily give you some tricks. Sketch out a very rough idea, and look through web images to find something that has already created.
It's like anything else that you wish to master, or become proficient in. If you want it, you've got to practice it over, and over, and over.
I, too was not born with a strong design skillset, in fact quite the opposite. When I started out, my philosophy was that if the page or form just works then my job was done!
Over the years though, I've improved. Although I believe I'll never be as good as someone who was born with the skills, sites like CSS Zen Garden among others have helped me a lot.
Read into usability too, as I think usability and design for computer applications are inextricably entwined. Books such as Don Norman's "The Design of Everyday Things" to Steve Krug's "Don't Make Me Think", have all helped improve my 'design skills'... slightly! ;-)
Good luck with it.
As I mentioned in a thread yesterday, I have found working through tutorials for Adobe Photoshop, Illustrator, InDesign, and After Effects to be very helpful. I use Adobe's Kuler site for help with colors. I think that designers spend a lot of time looking at other's designs. Some of the books out there on web site design might help, even for designing applications. Adobe TV has a lot of short videos on graphic design in general, as well as achieving particular results in one of their tools. I find these videos quite helpful.