1
\$\begingroup\$

I need to create something like blender's Node Editor for my 2D editor. Now I am not sure how to create the background so it is static infinite and draggable simillar to blender.

I need to make it so it doesn't wreck my GPU and that its infinite and can be zoomed in and out without a problem

enter image description here

Can anyone give me tips on where to start?

\$\endgroup\$
  • \$\begingroup\$ if you're using either java or c#, you could look into using Piccolo2d I've been using it for a similar thing myself (zoomable editor), and it seems to perform great. \$\endgroup\$ – clearlyspam23 Jun 19 '14 at 20:01
1
\$\begingroup\$

This really depends on the complexity of your background as well the technology being used.

For example, when using DirectX or OpenGL, all you have to do is utilizing texture wrapping:

  • Let's assume your background texture is 64x64 pixels in size.
  • To cover an area that is 640 pixels wide, you'd use texture coordinates ranging from 0 to 10 rather than 0 to 1.
  • With texture wrapping enabled, this will show your texture repeated 10 times horizontally.
  • The same can be done vertically and when adding some zoom factor.

However, if it's about some grid, you might just want to draw the grid on your own using draw calls. Just make sure you only draw to the visible area of the screen (not everything that might be visible in some way). You could also cache these drawing calls to a texture. Using primitives (like lines) rather than textures has the advantage that you can make it more dynamically, like hiding fine grid lines based on zoom level or possibly even animate them (like flashing some important/active gridline).

\$\endgroup\$
0
\$\begingroup\$

You need to use 2 separate background images. When you are scrolling past the boundaries of the first one, you place the second background at the edge to create the inifinite scrolling effect. Here is a simple example written in Lua.

For example when scrolling to the right set the position of backgrounds like this:

background2.x = background1.x + background1.width

This will place background2 at the right edge of background1.

I recommend looking up scrolling background tutorial for specific implementations in your development language.

\$\endgroup\$
  • \$\begingroup\$ How will it support zoom though? and what if it hits a corner? @Yowza7 \$\endgroup\$ – Amit Jun 20 '14 at 3:21
  • \$\begingroup\$ @Amit what technology are you using? \$\endgroup\$ – Jose Llausas Jun 20 '14 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.