# Simple Single Image Scrolling Example? (SOLVED)

**URL:** <https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345>\
**Category:** Questions\
**Created:** [January 20, 2021, 8:46pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345 "2021-01-20T20:46:39Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 20, 2021, 8:46pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/1 "2021-01-20T20:46:39Z")

</div>

Is there a sample anyone has of…

1. Load image dynamically to screen (assuming using GUI/dynamic texture load)

2. The image is larger than the screen

3. Simple dragging input to move around image larger than the viewport.

I’ve seen some tiled examples, etc. but not one that is a single image.

---

<div class="post-metadata">

**Author:** ![Klear](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/klear/32/11577_2.png) [@Klear](https://forum.defold.com/u/Klear)\
**Post date:** [January 20, 2021, 9:06pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/2 "2021-01-20T21:06:43Z")

</div>

[Would this work](https://forum.defold.com/t/multi-image-viewer-tool/11991)?

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 20, 2021, 9:14pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/3 "2021-01-20T21:14:30Z")

</div>

First off that’s wicked cool! And I love you used Defold for something utilitarian. I’ll check out the source. I basically just want to load say a 1000 x 1000 image into a box that is say 500 x 500 and not have it stretch/shrink to fit but instead be panable inside that defined window. Then surround it with gui, etc.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [January 20, 2021, 11:07pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/4 "2021-01-20T23:07:15Z")

</div>

> [@bensawyer](#):
>
> I’ve seen some tiled examples, etc. but not one that is a single image.

Is there really a difference?

> [@bensawyer](#):
>
> I basically just want to load say a 1000 x 1000 image into a box that is say 500 x 500 and not have it stretch/shrink to fit but instead be panable inside that defined window.

I think you want to size the box node the same size as the image and then either cover it with other gui nodes or add a stencil cutout of 500x500.

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 21, 2021, 5:29am UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/5 "2021-01-21T05:29:39Z")

</div>

Thanks, I was thinking of using a stencil but hadn’t tried it yet - I’ll go in that direction.

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 21, 2021, 8:51pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/6 "2021-01-21T20:51:52Z")

</div>

Hey, FWIW I’m working on this and was reviewing the API reference:

This line:  
“Clipping mode defines how the node will clipping it’s children nodes”

should read

“Clipping mode defines how the node will clip its children nodes”

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [January 22, 2021, 7:23am UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/7 "2021-01-22T07:23:36Z")

</div>

> [@bensawyer](#):
>
> should read
> 
> “Clipping mode defines how the node will clip its children nodes”

Thanks! Fixed: [Fix typo in gui clipping mode docs · defold/defold@534436f · GitHub](https://github.com/defold/defold/commit/534436f1004dab91f2f0563be3140cd32a170141)

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 22, 2021, 11:09am UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/8 "2021-01-22T11:09:20Z")

</div>

its not it’s as well. It’s is a typo we all make but it is not indicative of possessiveness.

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 22, 2021, 2:48pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/9 "2021-01-22T14:48:55Z")

</div>

I’m making progress but stumbled on a different issue as I try to just get a hackable prototype going. I’m trying to load two images from disk and set each to a new texture and populate their corresponding gui.node box.

```
filename = "scroll-room-examp"
filename = "/main/bundled_resources/common/scene-backgrounds/"..filename..".png"
local data, error = sys.load_resource(filename)
if not data then
	print("error: "..error)
	return
end
local png = image.load(data)
gui.new_texture("placeimage", png.width, png.height, "rgb", png.buffer)	
gui.set_texture(imagery, "placeimage")

filename = "women"
filename = "/main/bundled_resources/common/scene-objects/"..filename..".png"
local data2, error = sys.load_resource(filename)
if not data2 then
	print("error: "..error)
	return
end
newpng = image.load(data2)
gui.new_texture("objecttoload", newpng.width, newpng.height, "rgb", newpng.buffer)	

gui.set_texture(object1, "objecttoload")

```

But on the last line it’s triggering  
Texture ‘objecttoload’ is not specified in scene

I renamed some of the variables on the second block of loading code just to see if there was some issue there… I’m sure this isn’t the way to load multiple objects from disk to display in-game but again I’m just trying to get a quick and dirty version of this idea up and running first.

Going to look back at some older code that didn’t have this problem in meantime.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [January 22, 2021, 3:47pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/10 "2021-01-22T15:47:50Z")

</div>

> [@bensawyer](#):
>
> Texture ‘objecttoload’ is not specified in scene

> [@bensawyer](#):
>
> gui.new\_texture(“objecttoload”, newpng.width, newpng.height, “rgb”, newpng.buffer)

This call is likely failing for some reason. Check the return value (true/false). Do you see any errors in the console?

Note: In the next release (beta on Monday) we have improved gui.new\_texture() so that you get more info about why it is failing (out of resources, data format error etc).

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 22, 2021, 5:58pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/11 "2021-01-22T17:58:24Z")

</div>

will flood it with various print(something) - etc. to see what else comes out.

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 22, 2021, 7:55pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/12 "2021-01-22T19:55:44Z")

</div>

![44%20PM](https://forum-defold-uploads.b-cdn.net/original/3X/b/2/b2ddfd743393e3fc1e7b3b6b97c9d56ec9302194.png)

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 22, 2021, 8:08pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/13 "2021-01-22T20:08:45Z")

</div>

So… I was tracking down other ideas and ended up here:  
[Loading image from file (SOLVED)](https://forum.defold.com/t/loading-image-from-file-solved/63636) (hahahahah)  
and I flipped it from Rgb to Rgba (the opposite of the previous problem) and it worked. Is RGBA vs. RGB a transparency issue? This image has transparency.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [January 23, 2021, 2:02pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/14 "2021-01-23T14:02:29Z")

</div>

Ok, great! You found it. It does log “Invalid image buffer size” which is an indication that there was something wrong with the data. In the next version of Defold you’ll be able to catch this specific problem.

---

<div class="post-metadata">

**Author:** ![bensawyer](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/bensawyer/32/18843_2.png) [@bensawyer](https://forum.defold.com/u/bensawyer)\
**Post date:** [January 23, 2021, 6:23pm UTC](https://forum.defold.com/t/simple-single-image-scrolling-example-solved/67345/15 "2021-01-23T18:23:27Z")

</div>

Cool! I think it’s basically a PNG transparency vs. no transparency issue.
