Dezutezeoid: scrolling img objects, flashlight effects, and an obsurdly simple panoramic effect.

Its been a while since ive worked on my point and click engine, dezutezeoid.
for those that dont know, its written in python and pygame, is entirely XML driven, and is partly inspired by html links.


One of the very recent additions is the hscroll and vscroll attributes for the img objects. example:
        <img x="400" y="100" vscroll="2" hscroll="4">
            <con>animtest1a.png</con>
            <act type="none"/>
        </img>
        <img x="500" y="100" vscroll='-2' hscroll="4">
            <con>animtest1a.png</con>
            <act type="none"/>
        </img>
Those are from the "test1.xml" page included with dezutezeoid as part of its example program.vscroll and hscroll are independent.

test1.xml when displayed in Dezutezeoid

here is a nifty trick: If you need a visual to slide across the screen, place it on a transparent image that is just bigger enough than the screen size to make sure only one "copy" of that visual is well, visible. then you just set vscroll and hscroll appropriately and presto!  Play around with things until it looks decent.

Looking for a nice wide angle view? well. the example program has a nifty example of that. just click on "warp things...".

mind=blown you say? its simple really. its just one of several uses of the new mousev and mouseh img object attributes.

        <img x="300" y="100" mouseh="2">
            <con>folx.png</con>
            <act type="none"/>
        </img>
        <img x="300" y="100" mousev="2">
            <con>foly.png</con>
            <act type="none"/>
        </img>
This is the XML for the literal "X" and "Y" in "test1.xml".
obviously mouseh and mousev take priority over x and y.

mousev and mouseh have a few modes:
1= normal top-left corner alignment
2= centered alignment
3= screen-reversed centered alignment


So whats the secret of warptest1.xml and its mind-blowing effect?
        <img x="0" y="0" mouseh="3" mousev="3">
            <con>warptest1.jpg</con>
            <act type="none" ref="test0.xml"/>
        </img>
its just mouseh="3" and mousev="3" and a lens-distorted image that's 2x the screen size. the telescope effect is just a black image the same size with a hole cut in it, using mouseh="2" and mousev="2", drawn above the simple panoramic effect.






warptest1.jpg for comparison:




Not complicated at all.

the screen size is 800x600
the panoramic to the right is 1600x1200. 2x the size.




And now for a flashlight effect:

again its a 1600x1200 image. this time it has a circular transparent-to-black gradient to it.


the difference is its using mode 2 of mouseh and mousev. also do remember to use a background image 😉


XML code:
        <img x="0" y="0" mouseh="2" mousev="2">
            <con>flashlight.png</con>
            <act type="none" ref="test0.xml"/>
        </img>



Dezutezeoid might not be the worlds most capable point and click engine, but it works quite well for what it is.

Dezutezeoid on github