You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* initial start of updating docs to webgpu
* rewrite a bunch of articles for the new webgpu update and remove deprecated info
* remove the-game-class
* fix some deprecated api calls
* remove frame-buffer-objects and replace with a simple render-targets
* update mesh and fix links from /lehaine
* update nodes.md
* update containers.md
* tweaks for update
* more tweaks
The [Animation](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/Animation.kt) class contains the info on the key frames of the what is to be animated. All this class holds are the list of key frames, the list of indices associated to each key frame in the order to be palyed back in, as well as a list of `Duration` frame times for the amount of time spent displaying each frame.
8
+
The [Animation](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/Animation.kt) class contains the info on the key frames of the what is to be animated. All this class holds are the list of key frames, the list of indices associated to each key frame in the order to be palyed back in, as well as a list of `Duration` frame times for the amount of time spent displaying each frame.
9
9
10
10
The `Animation<T>` class also expects a type parameter. This would usually be a [TextureSlice](/docs/2d/textures-and-textureslices) but we can pass in any type we want to animate. For the following examples, we will be using a `TextureSlice`.
11
11
12
-
The `Animation` class itself doesn't handle any of the playback or playback times. We have to pass in the time expired to the class for it to determine which key frame is to be played. We can use an [AnimationPlayer](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/AnimationPlayer.kt) to enable playback of an animation but it is not required.
12
+
The `Animation` class itself doesn't handle any of the playback or playback times. We have to pass in the time expired to the class for it to determine which key frame is to be played. We can use an [AnimationPlayer](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/AnimationPlayer.kt) to enable playback of an animation but it is not required.
13
13
14
14
And of course we can create our own instance of an animation by simply just passing in the list of frames, indices, and times without needing an atlas.
15
15
@@ -57,15 +57,45 @@ val heroRun: Animation<TextureSlice> = atlas.getAnimation("heroRun")
57
57
val anim =AnimaationPlayer<TextureSlice>()
58
58
anim.playLooped(heroRun)
59
59
60
-
onRender { dt ->
61
-
gl.clear(ClearBufferMask.COLOR_BUFFER_BIT)
62
-
anim.update(dt) // handles requesting the next frames in the current animation
63
-
camera.update()
64
-
batch.use(camera.viewProjection) { batch ->
60
+
onUpdate { dt ->
61
+
val surfaceTexture = graphics.surface.getCurrentTexture()
62
+
val swapChainTexture = checkNotNull(surfaceTexture.texture)
63
+
val frame = swapChainTexture.createView()
64
+
65
+
val commandEncoder = device.createCommandEncoder()
66
+
val renderPassEncoder =
67
+
commandEncoder.beginRenderPass(
68
+
desc =
69
+
RenderPassDescriptor(
70
+
listOf(
71
+
RenderPassColorAttachmentDescriptor(
72
+
view = frame,
73
+
loadOp =LoadOp.CLEAR,
74
+
storeOp =StoreOp.STORE,
75
+
clearColor =
76
+
if (preferredFormat.srgb) Color.DARK_GRAY.toLinear()
Copy file name to clipboardExpand all lines: _docs/2d/bitmap-fonts.md
+7-8Lines changed: 7 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: Bitmap Fonts
3
3
permalink: /docs/2d/fonts/bitmap-fonts
4
4
---
5
5
6
-
Bitmap fonts are supported in the [BMFont](https://www.angelcode.com/products/bmfont/) format. A [BitmapFont](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/font/BitmapFont.kt) can draw strings of text using its own internal cache or we can create our own cache using the specified font.
6
+
Bitmap fonts are supported in the [BMFont](https://www.angelcode.com/products/bmfont/) format. A [BitmapFont](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/font/BitmapFont.kt) can draw strings of text using its own internal cache or we can create our own cache using the specified font.
7
7
8
8
## Bitmap Font
9
9
@@ -17,7 +17,7 @@ val font: BitmapFont = resourcesVfs["arial_32.fnt"].readBitmapFont()
17
17
18
18
### Drawing Text
19
19
20
-
Each `BitmapFont` object contains its own internal [BitmapFontCache](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/font/BitmapFontCache.kt) which is an extension of a [FontCache](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/font/FontCache.kt). When we draw directly with the font, it will store the geometry of the glyphs drawn internally. This will clear any existing text. If we want to draw strings of text at different positions and colors we will need to create our own `BitmapFontCache`.
20
+
Each `BitmapFont` object contains its own internal [BitmapFontCache](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/font/BitmapFontCache.kt) which is an extension of a [FontCache](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/font/FontCache.kt). When we draw directly with the font, it will store the geometry of the glyphs drawn internally. This will clear any existing text. If we want to draw strings of text at different positions and colors we will need to create our own `BitmapFontCache`.
21
21
22
22
Multi-line texts, wrapping, and horizontally aligning text are all supported. Wrapping works by specifying the max width that the area of a font should take up. If it exceeds it, the internal glyph layout will wrap the text.
23
23
@@ -27,7 +27,7 @@ Multi-line texts, wrapping, and horizontally aligning text are all supported. Wr
27
27
val batch =SpriteBatch(context)
28
28
val font:BitmapFont= resourcesVfs["arial_32.fnt"].readBitmapFont()
29
29
30
-
batch.use {
30
+
batch.use(renderPass)
31
31
// we don't actually have to specify each parameter as most have default options.
32
32
font.draw(batch, "This is my test", x =5f, y =5f, rotation =Angle.ZERO, color =Color.WHITE, targetWidth =0f, align =HAlign.LEFT, wrap =false)
33
33
}
@@ -48,7 +48,7 @@ val cache = BitmapFontCache(font)
48
48
cache.addText("This is my test", x =5f, y =5f)
49
49
cache.addText("This is another line", x =50f, y =5f)
50
50
51
-
batch.use {
51
+
batch.use(renderPass)
52
52
// draws any stored text data
53
53
cache.draw(batch)
54
54
}
@@ -61,12 +61,11 @@ val batch = SpriteBatch(context)
61
61
val font:BitmapFont= resourcesVfs["arial_32.fnt"].readBitmapFont()
62
62
val cache =BitmapFontCache(font)
63
63
64
-
65
64
cache.addText("This is my first line", x =50f, y =5f)
66
65
67
66
cache.setText("This is my test", x =5f, y =5f) // this will clear the data from the 'addText' method.
68
67
69
-
batch.use {
68
+
batch.use(renderPass)
70
69
// draws any stored text data
71
70
cache.draw(batch) // will only draw "This is my test"
72
71
}
@@ -88,7 +87,7 @@ Once we are done we can call the `dispose()` method on the `BitmapFont` object.
88
87
```kotlin
89
88
val font:BitmapFont= resourcesVfs["arial_32.fnt"].readBitmapFont()
Copy file name to clipboardExpand all lines: _docs/2d/cameras-and-viewports.md
+9-29Lines changed: 9 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ The _Camera_ class and _Viewport_ class will seem very familiar if one has every
7
7
8
8
## Using a Camera
9
9
10
-
The [Camera](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/Camera.kt) class is an abstract base that can be extended to create our own implementation of a camera. Luckily, we can use the [OrthographicCamera](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/graphics/Camera.kt#L339) implementation that is already offered.
10
+
The [Camera](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/Camera.kt) class is an abstract base that can be extended to create our own implementation of a camera. Luckily, we can use the [OrthographicCamera](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/graphics/Camera.kt#L339) implementation that is already offered.
11
11
12
12
The camera allows us to:
13
13
@@ -29,11 +29,10 @@ When using a camera we want to make sure we call the `update()` method on it bef
29
29
```kotlin
30
30
val camera =OrthographicCamera(graphics.width, graphics.height)
31
31
32
-
onRender {
33
-
gl.clear(ClearBufferMask.COLOR_BUFFER_BIT)
34
-
32
+
onUpdate {
33
+
val renderPass =... // render pass releated setup
35
34
camera.update()
36
-
batch.use(camera.viewProjection) {
35
+
batch.use(renderPass, camera.viewProjection) {
37
36
// we are using the cameras view projection matrix to render
38
37
}
39
38
}
@@ -50,7 +49,7 @@ onResize { width, height ->
50
49
51
50
## Using a Viewport
52
51
53
-
Instead of managing the size of the camera ourselves, we can use a _Viewport_ instead to handle the sizing. When creating a new _Viewport_ we can either pass in our own _Camera_ instance or let the viewport create its own which we then can reference.
52
+
Instead of managing the size of the camera ourselves, we can use a _Viewport_ instead to handle the sizing. When creating a new _Viewport_ we can either pass in our own _Camera_ instance or let the viewport create its own which we then can reference. WebGPU has certain limitations on viewports, when coming from OpenGL, may seem restrictive. For instance, viewports may not extend the size of the frame buffer it is drawing to. This makes things like a "FitViewport", where certain sides are extended outward, a bit harder to calculate as WebGPU will throw a fatal error when it detects it.
54
53
55
54
```kotlin
56
55
val viewport =ExtendViewport(480, 270)
@@ -61,39 +60,20 @@ A viewport can be resized by using the `update()` method which will also update
61
60
62
61
```kotlin
63
62
onResize { width, height ->
64
-
viewport.update(width, height, context)
63
+
viewport.update(width, height)
65
64
}
66
65
```
67
66
68
-
### Multiple Viewports
69
-
70
-
When we have multiple viewports, we must make sure we to apply the _Viewport_ before rendering so that the `glViewport` is set.
71
-
72
-
```kotlin
73
-
viewport.apply(context)
74
-
// draw using first viewport
75
-
viewport2.apply(context)
76
-
// draw using the second viewport
77
-
```
78
-
79
67
## Types of Viewports
80
68
81
69
### Stretch Viewport
82
70
83
-
A viewport that supports using a virtual size (via [StretchViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/util/viewport/ScalingViewports.kt#L34)). The virtual viewport is strechted to fit the screen. There are no black bars and the aspect ratio can change after scaling.
84
-
85
-
### Fit Viewport
86
-
87
-
A viewport that supports using a virtual size (via [FitViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/util/viewport/ScalingViewports.kt#L29)). The virtual viewport will maintain its aspect ratio while attempting to fit as much as possible onto the screen. Black bars may appear.
88
-
89
-
### Fill Viewport
90
-
91
-
A viewport that supports using a virtual size (via [FillViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/util/viewport/ScalingViewports.kt#L39)). The virtual viewport will maintain its aspect ratio but in an attempt to fiill the screen parts of the viewport may be cut off. No black bars may appear.
71
+
A viewport that supports using a virtual size (via [StretchViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/util/viewport/ScalingViewports.kt#L34)). The virtual viewport is strechted to fit the screen. There are no black bars and the aspect ratio can change after scaling.
92
72
93
73
### Extend Viewport
94
74
95
-
A viewport that supports using a virtual size (via [ExtendViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/util/viewport/ExtendViewport.kt)). The virtual viewport maintains the aspect ratio by extending the game world horizontally or vertically. The world is scaled to fit within the viewport and then the shorter dimension is lengthened to fill the viewport.
75
+
A viewport that supports using a virtual size (via [ExtendViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/util/viewport/ExtendViewport.kt)). The virtual viewport maintains the aspect ratio by extending the game world horizontally or vertically. The world is scaled to fit within the viewport and then the shorter dimension is lengthened to fill the viewport.
96
76
97
77
### Screen Viewport
98
78
99
-
A viewport that uses a virtual size that will always match the window size (via [ScreenViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/lehaine/littlekt/util/viewport/ScreenViewport.kt)). No scaling happens along with no black bars appearing.
79
+
A viewport that uses a virtual size that will always match the window size (via [ScreenViewport](https://github.com/littlektframework/littlekt/blob/master/core/src/commonMain/kotlin/com/littlekt/util/viewport/ScreenViewport.kt)). No scaling happens along with no black bars appearing.
0 commit comments