Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1401643 Posts in 67927 Topics- by 61469 Members - Latest Member: faketie

June 30, 2022, 11:58:36 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsTikotep Adventure - [PLAYABLE DEMO] - 2D adventure platformer
Pages: 1 ... 4 5 [6] 7 8 ... 15
Print
Author Topic: Tikotep Adventure - [PLAYABLE DEMO] - 2D adventure platformer  (Read 48177 times)
Mattie
Level 0
***


View Profile
« Reply #100 on: April 30, 2015, 11:38:14 AM »

After a lot of test/brainstorm/cofee, I finally managed to get something that look better for the game title.



What do you think of this version?

(Thank you all for your feedback/ideas, it was very helpful.)
This looks great, good job! I think you should make the mountains in the background less repetitive though. Smiley
Logged
alwex
Level 1
*



View Profile WWW
« Reply #101 on: May 01, 2015, 05:45:41 AM »

And the final result



the modifications are:
- I have reworked the ripple a little bit to make it more pixelated
- adding a static tile layer to make the title static
- adding a front layer with some kind of tree
« Last Edit: November 29, 2015, 10:06:43 PM by alwex » Logged


Follow us on playfield
and
Level 6
*



View Profile WWW
« Reply #102 on: May 01, 2015, 07:29:15 AM »

You know how much I love trees!

Yeah buddy, that looks super awesome. Can I buy it yet?  Wink
Logged

alwex
Level 1
*



View Profile WWW
« Reply #103 on: May 02, 2015, 04:45:46 AM »

Today I worked on a sky rendering system that can handle a day/night cycle.
The system can be drived using scripting language in the map editor (all scripts/cinematics in Tikotep adventure are made of Javascript)

here is the result, I think dawn is ok, but dusk can be better in term of colors.

« Last Edit: November 29, 2015, 10:07:10 PM by alwex » Logged


Follow us on playfield
alwex
Level 1
*



View Profile WWW
« Reply #104 on: May 11, 2015, 12:40:20 PM »

after a few days off, I am back to work.
The full story is now quite ready (on the paper) and I started to work on the introduction/first levels.
Here is a primer of what the spirit cave will look like.




As I mess lot with scenes, I decieded to use pure javascript for scripting purposes.

If someone is interested, here is how I do with Java

Code:
// init the javascript engine
ScriptEngineManager s = new ScriptEngineManager();
engine = s.getEngineByName("JavaScript");
// "this" is a helper class that
// can interact with the world
engine.put("director", this);

in the map editor you can now drive the game using javascript

Code:
director.disableInput();
director.stop("player");
director.say("player", "Hello everybody, I am alive!");
director.playMusic("myMusic.ogg");
director.enableInput();

and in the main function, eval the current script

Code:
engine.eval(script);

For now it works quite well and I can do a lot of stuff just editing the map.
« Last Edit: May 11, 2015, 12:47:36 PM by alwex » Logged


Follow us on playfield
xTylerx
Level 0
*


View Profile
« Reply #105 on: May 12, 2015, 04:59:01 AM »

The title screen and the water looks gorgeous. Kiss
Logged
alwex
Level 1
*



View Profile WWW
« Reply #106 on: May 13, 2015, 02:07:01 AM »

As promised earlier, I take some time to explain how I made the water surface effect.
All is made using libgdx and some GLSL shader.



Here are the steps.

1) just make a copy of the scene using a FBO

Code:
FrameBuffer fbo;
Texture img;

...

// initialize the FBO
fbo = new FrameBuffer(
  Pixmap.Format.RGBA8888,
  Gdx.graphics.getWidth(),
  Gdx.graphics.getHeight(),
  false
);

// load the texture
img = new Texture(Gdx.files.internal("landscape.jpg"));

in the main loop, render the texture on the fbo

Code:
fbo.begin();
{
  batch.begin();
  batch.draw(img, 0, 0);
  batch.end();
}
fbo.end();

retrieve the water surface texture

Code:
Texture waterSurface;

...

// level is the y location of the water surface
float yOffset = (Gdx.graphics.getWidth() - level);

waterSurface = new TextureRegion(
  fbo.getColorBufferTexture(),
  0,
  (int) yOffset, // is the y offset to cut the texture to the desired water level
  fbo.getColorBufferTexture().getWidth(),
  Gdx.graphics.getHeight()
);

then render the two texture on top of each other

Code:
batch.begin();
{
  batch.draw(img, 0, 0);
  batch.draw(waterSurface, 0, -level);
}
batch.end();

here is the first result




2) stretching the water surface

first start by creating a vertex shader that do nothing:

Code:
attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoord0;

void main()
{
    v_color = a_color;
    v_texCoord0 = a_texCoord0;
    gl_Position =  u_projTrans * a_position;
}

then the fragment shader

Code:
varying vec4      v_color;
varying vec2      v_texCoord0;

uniform vec4      u_color;
uniform sampler2D u_texture;
uniform sampler2D u_texture1;
uniform float     u_time;
uniform float     u_y_offset;
uniform float     u_sparkle_intensity;

void main()
{
    vec4 final_color = v_color;
    vec2 new_coord = v_texCoord0;

    // -----------------------------
    // STRETCH
    // -----------------------------
    // calculate the stretching factor
    float factor = ((0.5 - new_coord.x) * (new_coord.y - u_y_offset));
    // apply the factor and stretch the image
    new_coord.x += factor;

    final_color = (final_color) * texture2D(u_texture, new_coord);

    gl_FragColor = final_color;
}

in the render loop, bind the freshly created shader program

Code:
ShaderProgram waterShader;

...

waterShader = new ShaderProgram(
  Gdx.files.internal("shader/water.vert.glsl"),
  Gdx.files.internal("shader/water.frag.glsl")
);

...

batch.begin();
{
  batch.draw(img, 0, 0);
  batch.setShader(waterShader);
  batch.draw(waterSurface, 0, -level);
  batch.setShader(null);
}
batch.end();

here is the second result



3) the displacement map

What we want to do now is to apply some normal maps to create a nice distorion effect on the waterSurface texture.

we will use a normal map found on google image:



let's load it on our game!

Code:
Texture map;

...

map = new Texture(Gdx.files.internal("map.png"));

on our render loop, we need to bind the map to the correct opengl texture buffer

Code:
map.bind(1);
// be sure to rebind your landscape texture
// to the default buffer (0)
img.bind(0);

update the fragment shader

Code:
// -----------------------------
// FIRST HEIGHTMAP
// -----------------------------
// calculate heightmap scrolling
// based on the stretched coords
vec2 new_map_coord1 = new_coord;
// scroll the map
new_map_coord1.x += (u_time / 8.0);
// clamp the texture to make it repeat
// indefinitely
new_map_coord1 = fract(new_map_coord1);

// apply the heighmap displacement
// to the original texture
vec4 height_map_color1 = texture2D(u_texture1, new_map_coord1);
new_coord.xy += (height_map_color1.rg * 0.02);

// -----------------------------
// SECOND HEIGHTMAP
// -----------------------------
vec2 new_map_coord2 = new_coord;
new_map_coord2.x += (u_time / 30.0);
new_map_coord2 = fract(new_map_coord2);

vec4 height_map_color2 = texture2D(u_texture1, new_map_coord2);
new_coord.xy += (height_map_color2.rg * 0.02);

what this shader do is sliding the normal map and distorting the texture based on the red and blue chanel of the normal map.
I use the same normal map two time to make one distortion slide to the left quicker than the second one. It will be useful to calculate the sparkle later.



4) calculating the sparkling effect

update the fragment shader

Code:
if (( new_coord.y - v_texCoord0.y ) > u_sparkle_intensity) {
  final_color = vec4(1.0, 1.0, 1.0, 1.0);
  final_color = final_color;
} else {
  final_color = (final_color) * texture2D(u_texture, new_coord);
}

what this snipet do is replacing the final color with full white when the two displacement map have a y delta > to the sparkle intensity parameter provided by the program. So if the normal maps generate big wave, it will add some white on top of it.

In the render loop provide some data to the shader program

Code:
waterShader.begin();
{
  waterShader.setUniformi("u_texture1", 1); // enable texture buffer 1
  waterShader.setUniformf("u_time", now); // the time to make the normal map slide
  waterShader.setUniformf("u_y_offset", yOffset / Gdx.graphics.getHeight());
  waterShader.setUniform4fv("u_color", waterColor, 0, 4); // water color if needed
  waterShader.setUniformf("u_sparkle_intensity", sparkleIntensity); // the treshold when the wave will generate some sparkles
}
waterShader.end();

It is quite a long post, but some people asked me to explain the full process, so here it is.
I think it can easily be modified to fit with other languages/framework.
« Last Edit: November 29, 2015, 10:08:30 PM by alwex » Logged


Follow us on playfield
Prinsessa
Level 10
*****



View Profile
« Reply #107 on: May 13, 2015, 02:13:38 AM »

dat water
Logged

and
Level 6
*



View Profile WWW
« Reply #108 on: May 13, 2015, 02:22:21 AM »

Oh yeah your water looks loads better than mine!

damn you.
Logged

alwex
Level 1
*



View Profile WWW
« Reply #109 on: May 13, 2015, 02:18:40 PM »

hey, I am glad you like the water!
I hope this little tuto can help someone.

Here is a little screen of today's work



evening at the camp, just before the tribe's ritual begins
« Last Edit: November 29, 2015, 10:08:59 PM by alwex » Logged


Follow us on playfield
Ishi
Pixelhead
Level 10
******


coffee&coding


View Profile WWW
« Reply #110 on: May 14, 2015, 05:00:12 AM »

here is the first result



here is the second result




This stretching step bugs me a little bit - the first result looks more like real reflections in a water surface to me. The second looks like the scene has been draw on the floor because of the perspective effect. Other than that it looks great!
Logged

alwex
Level 1
*



View Profile WWW
« Reply #111 on: May 15, 2015, 12:39:52 AM »

@Ishi, hey you're right, Il will try to disable the perspective effect to see if it feel better. Perhaps the perspective may be applied only on the distortion effect, the nearer you are, the bigger the waves are.
Logged


Follow us on playfield
alwex
Level 1
*



View Profile WWW
« Reply #112 on: May 15, 2015, 02:44:22 AM »

I have just finished the moving block system. It is now possible to create nice object moving stuff and unlock secret areas

« Last Edit: November 29, 2015, 10:09:49 PM by alwex » Logged


Follow us on playfield
alwex
Level 1
*



View Profile WWW
« Reply #113 on: May 17, 2015, 06:22:48 AM »

I am messing around with my moving block system.
Here is some kind of ancient temple entrance

« Last Edit: November 29, 2015, 10:10:03 PM by alwex » Logged


Follow us on playfield
alwex
Level 1
*



View Profile WWW
« Reply #114 on: May 18, 2015, 08:52:05 AM »

I have made some tests with the water reflexion as Ishi suggested.
I think I prefer the not stretched one (I mean perspective effect):

Stretched



Not stretched



I also reworked the website:

http://www.tikotepadventure.com

I will try to post some little tuto sometimes.
Logged


Follow us on playfield
Mattie
Level 0
***


View Profile
« Reply #115 on: May 18, 2015, 08:56:40 AM »

The 'not stretched' version looks definitely more watery. Great job on the website too. (:
Logged
JobLeonard
Level 10
*****



View Profile
« Reply #116 on: May 18, 2015, 09:12:47 AM »

I think for a truly fair comparison we have to see both versions when scrolling - static shots don't always reflect how well something looks animated.
Logged
alwex
Level 1
*



View Profile WWW
« Reply #117 on: May 19, 2015, 01:30:47 AM »

@JobLeonard you are right, here are some animated gif of the effect:





I think I prefer the not stretched one
Logged


Follow us on playfield
JobLeonard
Level 10
*****



View Profile
« Reply #118 on: May 19, 2015, 03:25:48 AM »

TBH, I can't tell the difference in motion. But I'm not an animator, so I guess all that tells you is that you still have a beautiful look either way.
Logged
Igor Sandman
Level 0
***


Artist and Game dev


View Profile WWW
« Reply #119 on: May 19, 2015, 03:30:40 AM »

Thanks for taking the time to explain your water effect!
I really like the title screen. It is as cute as it gets.
Good job.
Logged

Pages: 1 ... 4 5 [6] 7 8 ... 15
Print
Jump to:  

Theme orange-lt created by panic