Repeating world with seamless transitions?

JCollie

Junior Newbie

Repeating world with seamless transitions?

« Posted 2011-04-22 16:00:38 »

Hey,

is it somehow possible to create the effect of an infinite world by repeating it with seamless transitions. For example a spaceshooter where you see the spaceship from the bird’s eye view. When the spaceship comes to the left end of the world it starts over from the right end. Like in Asteroids but with a scrolling camera, so that there would be a point where you could see the left and the right end of the world simultaneously (Like flying around the globe but actually having a plain terrain.). If it's from any relevance: I'm using JMonkeyEngine3.

greetings

krasse

JGO Knight

Medals: 25
Projects: 3

Re: Repeating world with seamless transitions?

« Reply #1 - Posted 2011-04-22 18:16:26 »

In principle, you just need to create a single seamless textures, but if you want a large world, it has to be very big.
You can have several seamless textures that you tile instead and make sure that your left world matches the right world tiles.

You can also do this procedurally with different types of periodic noise.

Here is a noise class that I use for smooth noise, both periodic and not:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253

public class GradientNoise {
   final static int TAB_SIZE = 512;
   final static int TAB_MASK = TAB_SIZE - 1;

   double[] gradientTab = new double[TAB_SIZE * 3];

   Random rnd;
   double[] valueTab = new double[TAB_SIZE];

   public GradientNoise(long seed) {
      rnd = new Random(seed);
      fillGradientTab();
   }

   public void setSeed(long seed) {
      if (rnd == null) {
         rnd = new Random(seed);
      } else {
         rnd.setSeed(seed);
      }
      fillGradientTab();
   }

   private void fillGradientTab() {
      for (int i = 0; i < TAB_SIZE; i++) {
         double z = getRandom();
         double r = Math.sqrt(1.0 - z * z);
         double theta = 2.0 * Math.PI * rnd.nextDouble();
         gradientTab[3 * i] = r * Math.cos(theta);
         gradientTab[3 * i + 1] = r * Math.sin(theta);
         gradientTab[3 * i + 2] = z;
      }
   }

   public double noise(double x, double y, double z) {
      int ix = MathUtils.floorInt(x);
      double fx0 = x - ix;
      double fx1 = fx0 - 1.0;
      double wx = MathUtils.smoothStep(fx0);

      int iy = MathUtils.floorInt(y);
      double fy0 = y - iy;
      double fy1 = fy0 - 1.0;
      double wy = MathUtils.smoothStep(fy0);

      int iz = MathUtils.floorInt(z);
      double fz0 = z - iz;
      double fz1 = fz0 - 1.0;
      double wz = MathUtils.smoothStep(fz0);

      double vx0 = latticeValue(ix, iy, iz, fx0, fy0, fz0);
      double vx1 = latticeValue(ix + 1, iy, iz, fx1, fy0, fz0);
      double vy0 = MathUtils.lerp(wx, vx0, vx1);

      vx0 = latticeValue(ix, iy + 1, iz, fx0, fy1, fz0);
      vx1 = latticeValue(ix + 1, iy + 1, iz, fx1, fy1, fz0);
      double vy1 = MathUtils.lerp(wx, vx0, vx1);
      double vz0 = MathUtils.lerp(wy, vy0, vy1);

      vx0 = latticeValue(ix, iy, iz + 1, fx0, fy0, fz1);
      vx1 = latticeValue(ix + 1, iy, iz + 1, fx1, fy0, fz1);
      vy0 = MathUtils.lerp(wx, vx0, vx1);

      vx0 = latticeValue(ix, iy + 1, iz + 1, fx0, fy1, fz1);
      vx1 = latticeValue(ix + 1, iy + 1, iz + 1, fx1, fy1, fz1);

      vy1 = MathUtils.lerp(wx, vx0, vx1);
      double vz1 = MathUtils.lerp(wy, vy0, vy1);

      return 2.0 * MathUtils.lerp(wz, vz0, vz1);
   }

   public double periodicNoise(double x, double y, double z, int periodX,
         int periodY, int periodZ) {
      int ix = MathUtils.floorInt(x);
      double fx0 = x - ix;
      double fx1 = fx0 - 1.0;
      double wx = MathUtils.smoothStep(fx0);

      int iy = MathUtils.floorInt(y);
      double fy0 = y - iy;
      double fy1 = fy0 - 1.0;
      double wy = MathUtils.smoothStep(fy0);

      int iz = MathUtils.floorInt(z);
      double fz0 = z - iz;
      double fz1 = fz0 - 1.0;
      double wz = MathUtils.smoothStep(fz0);

      double vx0 = periodicLatticeValue(ix, iy, iz, fx0, fy0, fz0, periodX,
            periodY, periodZ);
      double vx1 = periodicLatticeValue(ix + 1, iy, iz, fx1, fy0, fz0,
            periodX, periodY, periodZ);
      double vy0 = MathUtils.lerp(wx, vx0, vx1);

      vx0 = periodicLatticeValue(ix, iy + 1, iz, fx0, fy1, fz0, periodX,
            periodY, periodZ);
      vx1 = periodicLatticeValue(ix + 1, iy + 1, iz, fx1, fy1, fz0, periodX,
            periodY, periodZ);
      double vy1 = MathUtils.lerp(wx, vx0, vx1);
      double vz0 = MathUtils.lerp(wy, vy0, vy1);

      vx0 = periodicLatticeValue(ix, iy, iz + 1, fx0, fy0, fz1, periodX,
            periodY, periodZ);
      vx1 = periodicLatticeValue(ix + 1, iy, iz + 1, fx1, fy0, fz1, periodX,
            periodY, periodZ);
      vy0 = MathUtils.lerp(wx, vx0, vx1);

      vx0 = periodicLatticeValue(ix, iy + 1, iz + 1, fx0, fy1, fz1, periodX,
            periodY, periodZ);
      vx1 = periodicLatticeValue(ix + 1, iy + 1, iz + 1, fx1, fy1, fz1,
            periodX, periodY, periodZ);

      vy1 = MathUtils.lerp(wx, vx0, vx1);
      double vz1 = MathUtils.lerp(wy, vy0, vy1);

      return 2.0 * MathUtils.lerp(wz, vz0, vz1);
   }

   public double noise1D(double x) {
      int ix = MathUtils.floorInt(x);
      double fx0 = x - ix;
      double fx1 = fx0 - 1.0;
      double wx = MathUtils.smoothStep(fx0);

      double vx0 = latticeValue(ix, fx0);
      double vx1 = latticeValue(ix + 1, fx1);
      double vy0 = MathUtils.lerp(wx, vx0, vx1);

      return 2.0 * vy0;
   }

   public double periodicNoise1D(double x, int periodX) {
      int ix = MathUtils.floorInt(x);
      double fx0 = x - ix;
      double fx1 = fx0 - 1.0;
      double wx = MathUtils.smoothStep(fx0);
      
      double vx0 = periodicLatticeValue(ix, fx0, periodX);
      double vx1 = periodicLatticeValue(ix + 1, fx1, periodX);
      double vy0 = MathUtils.lerp(wx, vx0, vx1);
      return 2.0 * vy0;
   }
   
   
   public double noise2D(double x, double y) {
      int ix = MathUtils.floorInt(x);
      double fx0 = x - ix;
      double fx1 = fx0 - 1.0;
      double wx = MathUtils.smoothStep(fx0);

      int iy = MathUtils.floorInt(y);
      double fy0 = y - iy;
      double fy1 = fy0 - 1.0;
      double wy = MathUtils.smoothStep(fy0);

      double vx0 = latticeValue(ix, iy, fx0, fy0);
      double vx1 = latticeValue(ix + 1, iy, fx1, fy0);
      double vy0 = MathUtils.lerp(wx, vx0, vx1);

      vx0 = latticeValue(ix, iy + 1, fx0, fy1);
      vx1 = latticeValue(ix + 1, iy + 1, fx1, fy1);
      double vy1 = MathUtils.lerp(wx, vx0, vx1);
      double vz0 = MathUtils.lerp(wy, vy0, vy1);

      return 2.0 * vz0;
   }

   public double periodicNoise2D(double x, double y, int periodX, int periodY) {
      int ix = MathUtils.floorInt(x);
      double fx0 = x - ix;
      double fx1 = fx0 - 1.0;
      double wx = MathUtils.smoothStep(fx0);

      int iy = MathUtils.floorInt(y);
      double fy0 = y - iy;
      double fy1 = fy0 - 1.0;
      double wy = MathUtils.smoothStep(fy0);

      double vx0 = periodicLatticeValue(ix, iy, fx0, fy0, periodX, periodY);
      double vx1 = periodicLatticeValue(ix + 1, iy, fx1, fy0, periodX,
            periodY);
      double vy0 = MathUtils.lerp(wx, vx0, vx1);

      vx0 = periodicLatticeValue(ix, iy + 1, fx0, fy1, periodX, periodY);
      vx1 = periodicLatticeValue(ix + 1, iy + 1, fx1, fy1, periodX, periodY);
      double vy1 = MathUtils.lerp(wx, vx0, vx1);
      double vz0 = MathUtils.lerp(wy, vy0, vy1);

      return 2.0 * vz0;
   }

   public double noise(double x, double y) {
      return noise(x, y, 0.0);
   }

   double latticeValue(int ix, int iy, int iz, double fx, double fy, double fz) {
      int tabIndex = index(ix, iy, iz) * 3;
      return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy
            + gradientTab[tabIndex + 2] * fz;
   }

   double periodicLatticeValue(int ix, int iy, int iz, double fx, double fy,
         double fz, int periodX, int periodY, int periodZ) {
      int tabIndex = index(MathUtils.positiveMod(ix, periodX), MathUtils
            .positiveMod(iy, periodY), MathUtils.positiveMod(iz, periodZ)) * 3;
      return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy
            + gradientTab[tabIndex + 2] * fz;
   }

   double latticeValue(int ix, int iy, double fx, double fy) {
      int tabIndex = index(ix, iy) * 2;
      return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy;
   }

   double periodicLatticeValue(int ix, int iy, double fx, double fy,
         int periodX, int periodY) {
      int tabIndex = index(MathUtils.positiveMod(ix, periodX), MathUtils
            .positiveMod(iy, periodY)) * 2;
      return gradientTab[tabIndex] * fx + gradientTab[tabIndex + 1] * fy;
   }

   double latticeValue(int ix, double fx) {
      int tabIndex = index(ix);
      return gradientTab[tabIndex] * fx;
   }

   double periodicLatticeValue(int ix, double fx,
         int periodX) {
      int tabIndex = index(MathUtils.positiveMod(ix, periodX));
      return gradientTab[tabIndex] * fx;
   }

   
   int index(int ix) {
      return MathUtils.hash(ix) & TAB_MASK;
   }

   int index(int ix, int iy) {
      return MathUtils.hash(iy + MathUtils.hash(ix)) & TAB_MASK;
   }

   int index(int ix, int iy, int iz) {
      return MathUtils.hash(iz + MathUtils.hash(iy + MathUtils.hash(ix)))
            & TAB_MASK;
   }

   // Returns a value between -1 and 1
   double getRandom() {
      return 1.0 - 2.0 * rnd.nextDouble();
   }

}

Here are also the functions in MathUtils that I use:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

   // A magic hash
   public static int hash(int a) {
      a = (a + 0x7ed55d16) + (a << 12);
      a = (a ^ 0xc761c23c) ^ (a >> 19);
      a = (a + 0x165667b1) + (a << 5);
      a = (a + 0xd3a2646c) ^ (a << 9);
      a = (a + 0xfd7046c5) + (a << 3);
      a = (a ^ 0xb55a4f09) ^ (a >> 16);
      return a;
   }

   // b must be positive
   public static int positiveMod(int a, int b) {
      int result;
      if (a >= 0) {
         result = a % b;
      } else {
         result = (b + a % b) % b;
      }
      return result;
   }

   public static double lerp(double t, double x0, double x1) {
      return x0 + t * (x1 - x0);
   }


   public static double smoothStep(double x) {
      if (x < 0.0) {
         return 0.0;
      }
      if (x >= 1.0) {
         return 1.0;
      }
      return (x * x * (3.0 - 2.0 * x));
   }

   public static int floorInt(double x) {
      return (int) Math.floor(x);
   }

Abundant Music

JCollie

Junior Newbie

Re: Repeating world with seamless transitions?

« Reply #2 - Posted 2011-04-23 12:20:38 »

Hey thanks,

but it's actually not about repeating textures (I don't use any) or very big levels. It's more about small levels, but the player should not notice. I thought it might be possible to program something like that:

Games published by our own members! Check 'em out!

pitbuller

JGO Knight

Medals: 20
Projects: 3

Re: Repeating world with seamless transitions?

« Reply #3 - Posted 2011-04-23 12:59:16 »

Quote from: JCollie on 2011-04-23 12:20:38

How player see the movement at your game? If there is some backrgoung repeting player will allway notice that. So define your problem better.

JCollie

Junior Newbie

Re: Repeating world with seamless transitions?

« Reply #4 - Posted 2011-04-23 14:42:16 »

Quote from: JCollie on 2011-04-22 16:00:38

...you see the spaceship from the bird’s eye view....

Quote from: JCollie on 2011-04-23 12:20:38

...it's actually not about repeating textures (I don't use any)...

Mads

JGO Ninja

Medals: 23
Projects: 3

One for all!

Re: Repeating world with seamless transitions?

« Reply #5 - Posted 2011-04-23 18:07:01 »

This is going to take some time to explain.. Yawn

Luckily, there is a chapter in Killer Games Programming in Java about this, that I can link you to! Cheesy

http://fivedots.coe.psu.ac.th/~ad/jg/ch062/ch6-2.pdf
This is a draft of the chapter describing a side-scroller, found in KGP (from the author).

On page 14 -> 21 there is something about the problem you're describing.
In the draft the ever-scrolling backgrounds are called Ribbons.

The source code is also found there - this is the ribbons class:

// Ribbon.java
// Andrew Davison, April 2005, ad@fivedots.coe.psu.ac.th

/* A ribbon manages an image which is wider than the game panel's
   width: width >= pWidth

   When a sprite is instructed to move left or right, the 
   sprite doesn't actually move, instead the ribbon moves in
   the _opposite_direction (right or left). The amount of movement 
   is specified in moveSize.

   The image is wrapped around the panel, so at a given moment
   the tail of the image, followed by its head may be visible 
   in the panel.

   A collection of ribbons are managed by a RibbonsManager object.
*/

import java.awt.*;
import javax.swing.*;
import java.awt.image.*;



public class Ribbon
{
  private BufferedImage im;
  private int width;      // the width of the image (>= pWidth)
  private int pWidth, pHeight;    // dimensions of display panel

  private int moveSize;       // size of the image move (in pixels)
  private boolean isMovingRight;  // movement flags
  private boolean isMovingLeft;

  private int xImHead;   
     /* The x-coord in the panel where the start of the image
        (its head) should be drawn. 
        It can range between -width to width (exclusive), so can
        have a value beyond the confines of the panel (0-pWidth).

        As xImHead varies, the on-screen ribbon will usually
        be a combination of its tail followed by its head.
     */
 

  public Ribbon(int w, int h, BufferedImage im, int moveSz)
  {
    pWidth = w; pHeight = h;
    
    this.im = im;
    width = im.getWidth();    // no need to store the height
    if (width < pWidth) 
      System.out.println("Ribbon width < panel width");

    moveSize = moveSz;
    isMovingRight = false;   // no movement at start
    isMovingLeft = false;
    xImHead = 0;
  }  // end of Ribbon()



  public void moveRight()
  // move the ribbon image to the right on the next update
  { isMovingRight = true;
    isMovingLeft = false;
  }


  public void moveLeft()
  // move the ribbon image to the left on the next update
  { isMovingRight = false;
    isMovingLeft = true;
  }

  public void stayStill()
  // don't move the ribbon image on the next update
  { isMovingRight = false;
    isMovingLeft = false;
  }

  
  public void update()
  /* Increment the xImHead value depending on the movement flags.
     It can range between -width to width (exclusive), which is
     the width of the image.
  */
  { if (isMovingRight)
      xImHead = (xImHead + moveSize) % width;
    else if (isMovingLeft)
      xImHead = (xImHead - moveSize) % width;

    // System.out.println("xImHead is " + xImHead);
  } // end of update()


  public void display(Graphics g)
  /* Consider 5 cases: 
       when xImHead == 0, draw only the im head
       when xImHead > 0, draw the im tail and im head, or only the im tail.
       when xImHead < 0, draw the im tail, or the im tail and im head

     xImHead can range between -width to width (exclusive)
  */
  {
    if (xImHead == 0)   // draw im head at (0,0)
      draw(g, im, 0, pWidth, 0, pWidth);
    else if ((xImHead > 0) && (xImHead < pWidth)) {  
       // draw im tail at (0,0) and im head at (xImHead,0) 
      draw(g, im, 0, xImHead, width-xImHead, width);   // im tail
      draw(g, im, xImHead, pWidth, 0, pWidth-xImHead);  // im head
    }
    else if (xImHead >= pWidth)   // only draw im tail at (0,0)
      draw(g, im, 0, pWidth, 
                  width-xImHead, width-xImHead+pWidth);  // im tail
    else if ((xImHead < 0) && (xImHead >= pWidth-width))
      draw(g, im, 0, pWidth, -xImHead, pWidth-xImHead);  // im body
    else if (xImHead < pWidth-width) {
       // draw im tail at (0,0) and im head at (width+xImHead,0)
      draw(g, im, 0, width+xImHead, -xImHead, width);  // im tail
      draw(g, im, width+xImHead, pWidth, 
                  0, pWidth-width-xImHead);  // im head
    }
  } // end of display()


  private void draw(Graphics g, BufferedImage im, 
                        int scrX1, int scrX2, int imX1, int imX2)
  /* The y-coords of the image always starts at 0 and ends at
     pHeight (the height of the panel), so are hardwired. */
  { g.drawImage(im, scrX1, 0, scrX2, pHeight, 
                     imX1, 0,  imX2, pHeight, null);
  }

}  // end of Ribbon

http://www.JavaDaemon.com/

krasse

JGO Knight

Medals: 25
Projects: 3

Re: Repeating world with seamless transitions?

« Reply #6 - Posted 2011-04-23 22:00:38 »

Quote from: JCollie on 2011-04-23 12:20:38

It doesn't really matter if it is repeating textures or level data, it is basically the same problem on different scales, unless I got your question all wrong

BTW, the image link is broken.

Abundant Music

ra4king

JGO Kernel

Medals: 264
Projects: 2

I'm the King!

Re: Repeating world with seamless transitions?

« Reply #7 - Posted 2011-04-23 22:15:58 »

I think you meant this link instead:
http://img856.imageshack.us/img856/6064/unledjqp.png

-Roi
Check out my awesome website!
Follow me on Twitter!

pitbuller

JGO Knight

Medals: 20
Projects: 3

Re: Repeating world with seamless transitions?

« Reply #8 - Posted 2011-04-24 12:41:35 »

Quote from: JCollie on 2011-04-23 14:42:16

Quote from: JCollie on 2011-04-22 16:00:38

...you see the spaceship from the bird’s eye view....

Quote from: JCollie on 2011-04-23 12:20:38

...it's actually not about repeating textures (I don't use any)...

These are not helping. Movement is allways relative. So ship is moving relative to? And how player is seeing that. Imagine full black space without any fixed point so how you could know that you are really moving?

deepthought

JGO Coder

Medals: 10
Projects: 1

Re: Repeating world with seamless transitions?

« Reply #9 - Posted 2011-05-26 03:19:40 »

say a letter represents each world.W is the world you are currently in.

D
FWA
G

say your ship enters world G. delete worlds F,A, and D. add worlds where there are spaces. you now end up with

W
IGL
P

just make sure change which worlds are rendered BEFORE you can see the world you are about to enter.

jocks rule the highschools. GEEKS RULE THE WORLD MWAHAHAHA!!
captain failure test game

Pages: [1]

ignore | Print